基於瀏覽器的HTML5地理定位
阿新 • • 發佈：2018-11-10
最近專案要用到HTML5進行地理定位，上網查閱了一番，學習了藉助高德地圖 JS API和HTML5 Geolocation API兩種地理定位的方法，特此記錄。
實現效果如圖：
1、實現原理：html5地理定位 + 高德地圖
2、實現思路：
① 判斷瀏覽器是否支援geolocation地理定位
② 用HTML5 Geolocation API (地理位置應用程式介面)獲取經緯度
③ 呼叫高德地圖介面，將獲取到的經緯度以引數形式參入高德地圖地理座標中，並顯示到頁面上
（也可以呼叫百度地圖、谷歌地圖、騰訊地圖等，只需要將HTML5 Geolocation API獲取到的值傳入到相應的地圖介面中）
3、程式碼實現：
①呼叫高德地圖JavaScript API，URL路徑為：https://webapi.amap.com/maps?v=1.4.8&key=你的key值
②核心程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <title>基於瀏覽器的HTML5地理定位(高德地圖)</title> </head> <!-- 引入高德地圖API --> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=52c54e00b0497e80783f529fd46552b4"></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> <style> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <body> <div id="container"></div> </body> <script type="text/javascript"> function getLocation(){ var options={ enableHighAccuracy:true, //boolean 是否要求高精度的地理資訊，預設為false maximumAge:1000 //應用程式的快取時間 } if(navigator.geolocation){ //瀏覽器支援geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{ //瀏覽器不支援geolocation console.log("瀏覽器不支援!"); } } //成功時 function onSuccess(position){ //經度 var longitude =position.coords.longitude; //緯度 var latitude = position.coords.latitude; var map = new AMap.Map('container', { center:[longitude,latitude], zoom:16 }); // 建立 infoWindow 例項 var infoWindow = new AMap.InfoWindow({ content: "<div style='width:200px;padding:10px;'>"+ "您在這裡<br/>緯度："+ latitude+ "<br/>經度："+longitude //傳入 dom 物件，或者 html 字串 }); // 開啟資訊窗體 infoWindow.open(map); // 在指定位置開啟已建立的資訊窗體 var location = new AMap.LngLat(longitude, latitude); infoWindow.open(map, location); } //失敗時 function onError(error){ switch(error.code){ case error.PERMISSION_DENIED: alert("使用者拒絕對獲取地理位置的請求"); break; case error.POSITION_UNAVAILABLE: alert("位置資訊是不可用的"); break; case error.TIMEOUT: alert("請求使用者地理位置超時"); break; case error.UNKNOWN_ERROR: alert("未知錯誤"); break; } } window.onload=getLocation(); </script> </html>
此程式碼在PC端執行，會得不到資料，因為獲取位置資訊，以及監控位置的變化這些操作都屬於敏感性操作，所以browsers在執行都會非常謹慎。它需要你在安全的環境並且獲取使用者的同意才會執行。
在移動端，會提示是否允許地理位置授權，使用者同意後，才會繼續獲取資料，進行下面的操作。