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

一、安装依赖

npm install vue-amap --save

二、增加配置

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

entry: {

app: './src/main.js'

},

externals:｛

"AMap": "AMap",

}

index.html中引入高德appkey

三、创建文件

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

祝君成功~