在仿马蜂窝的小项目中有个模块需要定位用户的 当前位置，所以我打算使用高德地图的vue-amap插件实现功能。
首页去高德的开发者平台申请key。
我申请的是web端的。
然后npm install vue-amap下载amap的包
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
在main.js中引入
初始化amap的配置
VueAMap.initAMapApiLoader({
key: '',
plugin: [
'AMap.Autocomplete',
'AMap.PlaceSearch',
'AMap.Scale',
'AMap.OverView',
'AMap.ToolBar',
'AMap.MapType',
'AMap.PolyEditor',
'AMap.CircleEditor',
'AMap.Geolocation'
],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
});
在官网默认的案例中是没有最后一个插件的，而要实现定位就一定要配置AMap.Geolocation这个插件。
<el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"> </el-amap>
center表示地图的中心点，
关键是plugin
center: [121.59996, 31.197646]
plugin: [{
pName: 'Geolocation',
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
// 如果key是企业的，还可以直接result.addressComponent获取省市，周边等信息
/*self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];*/
self.loaded = true;
self.result=result;
if(result.addressComponent.city){
self.citys=result.addressComponent.city;
}else{
self.citys=result.addressComponent.province;
}
self.district=result.addressComponent.district;
self.$nextTick();
}
});
}
}
}]
省市区的信息是可以通过回调函数中的result.addressComponent来获取到的，但是这里要注意一点，如果是像北京这样的直辖市它的city是""空的，信息在province中。所以如果我们只想显示市和区的信息的话就要判断一下，当city不为空时，取city的信息，而如果city为空就取province的信息。
<span v-if="loaded">
{{citys+district}}
</span>
<span v-else>正在定位</span>
布局通过变量loaded控制显隐，如果定位的回调函数中已经请求回来具体信息则loaded为true。显示具体信息就可以了。
