說兩句：
准備工作：
拿到key之后，在頁面引入高德API和UI組件庫以及相關CSS文件
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script src="http://cache.amap.com/lbs/static/es5.min.js"></script> <script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告訴你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script> <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
顯示基礎地圖所用到的HTML和JS
<body> <div id="container"></div> </body>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]//默認的地圖中心經緯度
});
</script>
引入高德地圖工具包js文件
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
瀏覽器定位所用到的JS
/** * Created by Mark on 2018/5/3. */ //定位 map.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位，默認:true timeout: 10000, //超過10秒后停止定位，默認：無窮大 maximumAge: 0, //定位結果緩存0毫秒，默認：0 convert: true, //自動偏移坐標，偏移后的坐標為高德坐標，默認：true showButton: true, //顯示定位按鈕，默認：true buttonPosition: 'LB', //定位按鈕停靠位置，默認：'LB'，左下角 buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20) showMarker: true, //定位成功后在定位到的位置顯示點標記，默認：true showCircle: true, //定位成功后用圓圈表示定位精度范圍，默認：true panToLocation: true, //定位成功后將定位到的位置作為地圖中心點，默認：true zoomToAccuracy:true //定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：false }); map.addControl(geolocation); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯信息 }); //解析定位結果 function onComplete(data) { if(data.status == 1){ console.log("定位成功"); $("#addressInput").val(data.formattedAddress); sessionStorage.setItem("dingWei-lng",data.position.getLng()); sessionStorage.setItem("dingWei-lat",data.position.getLat()); } var str = []; str.push('經度：' + data.position.getLng()); str.push('緯度：' + data.position.getLat()); str.push('是否經過偏移：' + (data.isConverted ? '是' : '否')); console.log(str.join('<br>')); } function onError() { var str = []; str.push('定位失敗'); console.log(str.join('<br>')); }
到這里為止，使用高德地圖實現瀏覽器定位已經完成了。
但是...^_^
/*************************************** 由於Chrome、IOS10等已不再支持非安全域的瀏覽器定位請求，為保證定位成功率和精度，請盡快升級您的站點到HTTPS。 ***************************************/