js 配合高德地圖 獲取當前用戶經緯度及位置信息

第一步  引入 js 文件  

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=********************"></script>

這裏的 ***********  需要你自己去 高德地圖 官網 去註冊申請 一個webapi 然後你會得到一個key 放這就可以了

第二步  編寫js方法

廢話補多少 直接上代碼   代碼 直接 將方法綁定在了 vue 身上

Vue.prototype.$getLocationInfo= (callback) => {
      //獲取當前位置(方法名)
      let map, geolocation;
      //加載地圖，調用瀏覽器定位服務
      map = new AMap.Map('container', {
        resizeEnable: true
      });
      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', function (obj) {
          callback({status:1,position:obj.position,addressInfo:obj.formattedAddress})
        }); //返回定位信息
        AMap.event.addListener(geolocation, 'error', function (error) {
          callback({status:0})
        }); //返回定位出錯信息
      });

我寫成了回調模式  所以  在任意頁面 你調用即可

this.$getLocationInfo((result) => {

    console.info(result)

})

裏面就是地理位置信息了 

這裏注意一點   高德地圖 申請祕鑰地址 https://lbs.amap.com/

申請的時候 記得選 web端  jsAPI哦