前端獲取手機地理位置座標
阿新 • • 發佈：2018-12-09
用的是騰訊的地圖的javascript的API，第一次接觸移動端，有點小激動，哈哈，廢話不多說直接上程式碼：
參考連結： 點選開啟連結<!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 { background-color: #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; background-color: #009DDC; color: white; } </style> <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script> </head> <body> <div id="pos-area"> <p id="demo">點選下面的按鈕，獲得對應資訊：<br /></p> </div> <div id="btn-area"> <button onClick="geolocation.getLocation(showPosition, showErr, options)">獲取精確定位資訊</button> <button onClick="geolocation.getIpLocation(showPosition, showErr)">獲取粗糙定位資訊</button> <button onClick="showWatchPosition()">開始監聽位置</button> <button onClick="showClearWatch()">停止監聽位置</button> </div> <script type="text/JavaScript"> var geolocation = new qq.maps.Geolocation("JKDBZ-QGTKO-GWFWF-SQ2ZZ-5S2GE-S4FVN", "myapp");document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px'; var positionNum = 0; var options = {timeout: 8000}; 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>