利用H5構建地圖和獲取定位地點
阿新 • • 發佈：2017-12-09
script false eight navi 高精度 位置 前端 err web
地圖與地理定位
定位在大部分項目中都需要實現，如何實現主要有如下的幾種方法
H5定位
在HTML5中navigator有很強大的功能，其中就有定位的方法
navigator.geolocation.getCurrentPosition(function showPosition(position){ lat=position.coords.latitude; lon=position.coords.longitude; console.log(lat,lon) },function(err){ console.log(err) });這個服務其實是谷歌提供的，在我們國內使用的可能性較低
後端定位
前端調用一個後端提供的接口，後端進行定位操作，返回給前端
在工作中公司後端是可以給你調接口的！！（也不一定要自己弄，可以直接讓後端搞。。嘿嘿）利用百度地圖API/高德地圖API...定位
獲取坐標，取回地點
<script src="http://webapi.amap.com/maps?v=1.4.2&key=025f0c88ec8249226cfc528b6e83c535（key值可以從高德地圖api獲取key值這 是筆者自己申請的key值）&plugin=AMap.Geocoder"></script> <script> var map, geolocation; //加載地圖，調用瀏覽器定位服務 map = new AMap.Map(‘container‘, { resizeEnable: true }); map.plugin(‘AMap.Geolocation‘, function() { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位，默認:true timeout: 20000, //超過10秒後停止定位，默認：無窮大 buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20) zoomToAccuracy: true, //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，默認：false buttonPosition:‘RB‘ }); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, ‘complete‘, function onComplete(data) { console.log(data.position.getLat(),data.position.getLng()) regeocoder([data.position.getLng(),data.position.getLat()]) });//返回定位信息 }); function regeocoder(pos) { //逆地理編碼 var geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); geocoder.getAddress(pos, function(status, result) { if (status === ‘complete‘ && result.info === ‘OK‘) { console.log(result) } }); } </script>在國內地圖應用公司主要有這麽幾個：百度-百度地圖，騰訊-騰訊地圖，阿裏-高德地圖，搜狗-搜狗地圖..
這些地圖都會為開發者提供一些便利來使用其中的一些功能
做一個自己的地圖
<style> #map{ width: 100%; height: 100vh; } </style> <div id="map"></div> <script src="http://webapi.amap.com/maps?v=1.4.2&key=4e2c29a761a9c245ddd69c5e64be66a5"></script> <script> var map = new AMap.Map(‘map‘, { resizeEnable: true, zoom:11, center: [116.397428, 39.90923] }); </script>
利用H5構建地圖和獲取定位地點