vue獲取地理位置（PC端）

第一步：在項目中創建一個js文件，然后把下面的代碼全部拷貝進去

/**
 * 高德地圖定位
 * @type {{}}
 */
export const location =  {
    initMap(id){
      let mapObj = new AMap.Map(id, {})
      let geolocation;
      mapObj.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
          })
          mapObj.addControl(geolocation)
          geolocation.getCurrentPosition()

      })
      return geolocation;
    },
  }

第二步：在需要用到的頁面引入你創建的這個js文件

import { location } from "./js/Location";

 

第三步：就是調用方法了。首先在methods方法中聲明方法，然后在mounted掛在后調用聲明的方法即可

methods: {
/**獲取地圖定位*/
　　getLocation() {
　　　　let _that = this;
　　　　let geolocation = location.initMap("map-container"); //定位
　　　　AMap.event.addListener(geolocation, "complete", result => {
　　　　　　_that.lat = result.position.lat;
　　　　　　_that.lng = result.position.lng;
　　　　　　_that.province = result.addressComponent.province;
　　　　　　_that.city = result.addressComponent.city;
　　　　　　_that.district = result.addressComponent.district;
　　　　});
　　},
}
mounted() {
　　this.getLocation(); // 調用獲取地理位置
}

第四部：在index.html中引入秘鑰（最好放在body中）

<!-- 引入高德地圖所需秘鑰 -->
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=7ab53b28352e55dc5754699add0ad862&plugin=AMap.PlaceSearch'></script>

 

或者

 

　　　　created(){
    　　　　this.getLocation(); //獲取地理位置
　　　　},
　　　　getLocation:function(){
            var mapObj,geolocation;
            mapObj = new AMap.Map('iCenter');
            mapObj.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
                });
                mapObj.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出錯信息
            });
            function onComplete(result){
                console.log(result)
                console.log(result.formattedAddress, result.position.lat, result.position.lng)
                this.text.latitude = result.position.lat;
                this.text.longitude = result.position.lng;
                this.text.formattedAddress = result.formattedAddress;
            }
            function onError(error){
                console.log(error)
            }
       },        

 

 

--------------------------------------------------------------------

https://www.cnblogs.com/dianzan/p/10678397.html