vue高德地图获取当前位置(五步实现)

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

一、安装依赖

npm install vue-amap --save

二、增加配置

在 webpack.config.js 配置文件中配置AMap

entry: {
      app: './src/main.js'
  },
externals:｛
      "AMap": "AMap",
  }

index.html中引入高德appkey

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的key"></script>

三、创建文件

创建一个名为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文件

在要用到相关定位功能的页面引入该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
        })
      },

五、运行结果

image.png

祝君成功~

最后编辑于：2020.06.01 11:34:04