说明:本文主要是介绍如何在Vue项目中接入高德地图并定位当前城市,更深层次的内容稍后有空整理。
可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考。
Vue项目运行环境:Vue 2.0,Vue Cli 3.0
步骤如下:
步骤一:登录高德地图开放平台 通过 控制台---->应用管理---->我的应用---->创建应用。创建一个新的应用,获取到key。
截图如下:
步骤二:在index.html文件中通过script标签和上一步获取的key引入高德地图资源。
截图如下:
步骤三:在项目的根目录中(src同级目录)创建vue.config.js文件(这个文件从Vue Cli 3.0 之后不再创建,有需要时需要我们自己手动创建)。
然后添加以下代码。代码和截图如下:
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
步骤四:在组件中通过以下代码获取定位。
代码和截图如下:
.......
mounted() {
this.getLocation();
},
methods: {
// 获取定位
getLocation() {
const _this = this;
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);
_this.autolocation = result.city;
}
})
});
}
}
......
走到这里,不出意外,你就可以获取到位置信息了。上述代码通过当前组件的autolocation属性接收了定位到的城市(city)信息。
本章结束。
如果文章对你有帮助,碰巧想请我喝杯咖啡,可以点击这里。