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