1.申请key
2.在页面添加 JS API 的入口脚本标签
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/',
configureWebpack: {
externals: {
'AMap': 'AMap',
'AMapUI': 'AMapUI'
}
},
css: {
loaderOptions: {
sass: {
additionalData:`@import "./src/assets/scss/public";`
}
}
}
}
4.页面使用
mounted() {
this.getLngLatLocation();
},
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) {
debugger
// data是具体的定位信息
console.log('定位成功信息:', data.addressComponent.city);
self.city = data.addressComponent.city;
}
function onError (data) {
// 定位出错
console.log('定位失败错误:', data);
// 调用IP定位
self.getLngLatLocation();
}
});
},
// 通过IP获取当前位置
getLngLatLocation () {
AMap.plugin('AMap.CitySearch', function () {
debugger
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') {
debugger
// result为对应的地理位置详细信息
console.log(data);
}
});
});
}
});
});
}
}
以上;