<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>前端定位模块</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <style> * { margin: 0; padding: 0; border: 0; } body { position: absolute; width: 100%; height: 100%; text-align: center; } #pos-area { Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.6em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: gray !important;">#009DDC; margin-bottom: 10px; width: 100%; overflow: scroll; text-align: left; color: white; } #demo { padding: 8px; font-size: small; } #btn-area { height: 100px; } button { margin-bottom: 10px; padding: 12px 8px; width: 42%; border-radius: 8px; Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.6em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: gray !important;">#009DDC; color: white; } </style> <Script type = "text / JavaScript" the src = "Key & https://apis.map.qq.com/tools/geolocation/min?key=your Referer = MyApp"> </ Script> </ head> <body> < ID = div "POS-Area"> <P ID = "Demo"> click below, to obtain the corresponding information: <br /> </ P> </ div> <div ID = "BTN-Area"> <button onClick = "getCurLocation ()"> to obtain accurate positioning information </ Button> <Button the onClick = "geolocation.getIpLocation (showPosition, showErr)"> Get rough positioning information </ Button> <Button the onClick = "showWatchPosition ()"> start listening position </ Button> <Button the onClick = "showClearWatch ()"> stop listening position </ Button> </div> <script type="text/JavaScript"> var geolocation = new qq.maps.Geolocation(); document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px'; var options = {timeout: 9000}; var positionNum = 0; function getCurLocation() { geolocation.getLocation(showPosition, showErr, options); } function showPosition(position) { positionNum ++; document.getElementById("demo").innerHTML += "序号:" + positionNum; document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4); document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; }; function showErr() { positionNum ++; document.getElementById("demo").innerHTML += "序号:" + positionNum; document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败!"; document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; }; function showWatchPosition() { document.getElementById("demo").innerHTML += "开始监听位置!<br /><br />"; geolocation.watchPosition(showPosition); document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; }; function showClearWatch() { geolocation.clearWatch(); document.getElementById("demo").innerHTML += "停止监听位置!<br /><br />"; document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; }; </script> </body> </html>