vue高德地图获取当前位置

前言：官网申请密钥:https://lbs.amap.com
参考vue-amap

一：安装依赖

npm install vue-amap --save

二：main.js中的配置

key申请地址教程：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'd6eabbd08f89ccfb74278b36ab6342567', // 自己到官网申请，我随便写的
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation','Geocoder'],//plugin所要用到的模块功能，按需添加
  v: '1.4.4',//高德 sdk 版本为 1.4.4
});

template中使用

<template>
  <div class="page">
    <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :events="events"></el-amap>
    <div class="toolbar" >position: [{{ lng }}, {{ lat }}] address: {{ address }},个人location:{{location}}</div>
  </div>
</template>

<script>
import location from "../../utils/positionLocation.js";
export default {
  name: "page",
  data() {
    let self = this;
    return {
      title: "标题",
      zoom: 12,
      center: [120.011574, 30.286369],
      address: "",
      events: {
        click(e) {
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          geocoder.getAddress([lng, lat], function(status, result) {
            // console.log(status, result);
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                console.log(result);
                self.address = result.regeocode.formattedAddress;
                self.$nextTick();
              }
            }
          });
        }
      },
      lng: 0,
      lat: 0,
      location: ""
    };
  },
  components: {},
  mounted() {
    this.getLocation();
  },
  methods: {
    getLocation() {
      let _that = this;
      let geolocation = location.initMap("map-container"); // 定位
      AMap.event.addListener(geolocation, "complete", result => {
        console.log(result);
        let { lng, lat } = result.position;
        _that.lat = result.position.lat;
        _that.lng = result.position.lng;
        _that.location = result.formattedAddress; 
      });
    }
  }
};
</script>

<style scoped>

</style>

主要获取定位：

var map, geolocation;
      //加载地图，调用浏览器定位服务   高德地图
      map = new AMap.Map("container", {
        resizeEnable: true
      });
      map.plugin("AMap.Geolocation", function() {
        geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：无穷大
          buttonPosition: "RB"
        });
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", function onComplete(
          data
        ) {
          console.log(data);
          var lng = data.position.getLng();
          var lat = data.position.getLat();
          // alert(getLongitude + "," + getLatitude); //弹出获得的经纬度
          // that.item.address = getLongitude + "," + getLatitude;
          var address = data.formattedAddress;
          console.log(lng, lat, address);
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          geocoder.getAddress([lng, lat], function(status, result) {
            console.log(status, result);
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                console.log(result);
                let data = result.regeocode.addressComponent;
                that.item.address = data.province + data.city + data.district;
                // self.$nextTick();
                Indicator.close();
              }
            }
          });
        }); //返回定位信息
      });

另一种方式

创建一个名为positionLocation.js的文件，文件内容如下：

/**
 * 高德地图定位
 * @type {{}}
 */
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;
  }
}
export default location

在要用到相关定位功能的页面引入该js文件

import AMap from 'AMap'
import location from '../../javascript/positionLocation.js'
export default {
    data() {
        return {
            // 高德地图获取当前位置
            location: '',
            lat: 0,
            lng: 0,
      }
  },
        
    mounted() {
      this.getLocation(); // 调用获取地理位置
    },
    methods: {  
      /** 获取高德地图定位 */
      getLocation() {
        let _that = this
        let geolocation = location.initMap('map-container') // 定位
        AMap.event.addListener(geolocation, 'complete', result => {
          console.log(result)
          _that.lat = result.position.lat
          _that.lng = result.position.lng
          _that.location = result.formattedAddress
        })
      },
}

注意key的时效性,过时了formattedAddress可能会获取不到