1.安装
npm安装:
npm install vue-amap --save
CDN:
<script src="https://unpkg.com/vue-amap/dist/index.js"></script>
2.配置
main.js:
import Vue from 'vue';
import VueAMap from 'vue-amap'; // 高德
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '*******你的key*********',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'],
v: '1.4.4'
});
3.使用地图
相关参数请参考:组件 | vue-amap
html:
<el-amap vid="amap" :plugin="plugin" :events="events" class="amap" :center="center" :zoom="zoom">
<el-amap-marker :position="center" vid="amapMarker"></el-amap-marker>
</el-amap>
el-amap-marker:地图的标记点,不需要可以不用写,我这里需要
js:
data () {
let self = this;
return {
nearbyInfo: [], // 周边信息---高德反馈(周边建筑信息)
addressInfo: '', // 城市信息---高德反馈(省市区、adcode)
center: [0, 0], // 高德地图中心点
zoom: 15, // 地图缩放
events: {
'click': (e) => { // 点击地图的时候,获取点击的经纬度,并将地图中心点移自此处
let m = e.lnglat;
self.addrInput = '';
self.center = [m.lng, m.lat];
self.GDmapGetInfoOfNearby(m.lng, m.lat, self); // 获取周边信息
}
},
plugin: [
{
pName: 'Geolocation',
noIpLocate: 1, // ios11: 禁止ip定位:ios11之后默认是ip定位,参数为1则是禁止ip定位
events: {
init: (o) => {
self.GDinit(o, self); // 获取当前位置
}
}
}
]
};
},
使用‘Geolocation’的时候一定要在前面的配置中写上“AMap.CircleEditor”,否则不生效。
/* 初始化定位当前位置 */
GDinit (o, self) {
o.getCurrentPosition((status, result) => {
console.log(status, result);
if (status === 'complete' && result.info === 'SUCCESS') {
let lat = result.position.lat;
let lng = result.position.lng;
self.center = [lng, lat];
self.GDmapGetInfoOfNearby(lng, lat, self); // 获取周边信息
}
});
},
/* 获取周边建筑信息 */
GDmapGetInfoOfNearby (lng, lat, self) {
// 这里通过高德 SDK 完成。
let geocoder = new AMap.Geocoder({
radius: 1000,
extensions: 'all',
poitype: ''
});
geocoder.getAddress([lng, lat], (status, result) => {
if (status === 'complete' && result.info === 'OK') {
if (result && result.regeocode) {
console.log(result);
self.$nextTick();
}
}
});
},
radius:搜索半径,
poitype:返回附近POI类型(周边信息),相关地址:地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API,
文档下载地址:相关下载-Web服务 API | 高德地图API
extensions:返回结果控制,参数为 all 时poitype才生效
相关参数地址:地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API
4.地图搜索功能
<el-amap-search-box class="search-box" :on-search-result="GDonSearchResult"></el-amap-search-box>
js
/* 搜索结果回调函数 */
GDonSearchResult (e) {
console.log(e);
this.center = [e.lng, e.lat];
this.GDmapGetInfoOfNearby(e[0].lng, e[0].lat, this);
}
相关API:组件 | vue-amap