初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828

1、高德地图准备

点进入网址：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

(1)注册开发者账号

(2)进入控制台

(3)申请高德地图key

2、在index.html中引入高德地图

3、vue中代码

// methods部分

getLocation() {

const self = this

AMap.plugin('AMap.Geolocation', function () {

var geolocation = new AMap.Geolocation({

// 是否使用高精度定位，默认：true

enableHighAccuracy: true,

// 设置定位超时时间，默认：无穷大

timeout: 10000,

})

geolocation.getCurrentPosition()

AMap.event.addListener(geolocation, 'complete', onComplete);

AMap.event.addListener(geolocation, 'error', onError);

function onComplete(data) {

// data是具体的定位信息

console.log('定位成功信息：', data);

}

function onError(data) {

// 定位出错

console.log('定位失败错误：', data);

// 调用ip定位

self.getLngLatLocation();

}

})

},

getLngLatLocation() {

AMap.plugin('AMap.CitySearch', function () {

var citySearch = new AMap.CitySearch();

citySearch.getLocalCity(function (status, result) {

if (status === 'complete' && result.info === 'OK') {

// 查询成功，result即为当前所在城市信息

console.log('通过ip获取当前城市：', result)

//逆向地理编码

AMap.plugin('AMap.Geocoder', function () {

var geocoder = new AMap.Geocoder({

// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode

city: result.adcode

})

var lnglat = result.rectangle.split(';')[0].split(',');

geocoder.getAddress(lnglat, function (status, data) {

if (status === 'complete' && data.info === 'OK') {

// result为对应的地理位置详细信息

console.log(data)

}

})

})

}

})

})

}

// created 中调用

created () {

// 此处为调用精确定位之后，调取ip定位，可根据实际情况改写

this.getLocation();

}