做业务开发使用到高德地图，把遇到的问题和基础使用流程整理一下。
基础使用流程
通过npm的方式
1. 安装npm
npm i amap/amap-jsapi-loader -S
高德开放平台官网提供的地图 JSAPI 的加载器 www.npmjs.com/package/@am…
2. 引入
import AMapLoader from '@amap/amap-jsapi-loader'
3. 初始化
<>
<div id="amap"></div>
AMapLoader.load({
key: '', // 申请的key
version: '1.4.15'
})
.then(AMap => {
// 创建地图实例
map = new AMap.Map('amap', { //其他配置 })
// 加载插件
AMap.plugin(['AMap.ToolBar', 'AMap.Geocoder'], () => {
map.addControl(new AMap.ToolBar())
geocoder = new AMap.Geocoder()
})
// 绑定事件
map.on('click', this.clickMap)
})
.catch(e => {
throw '地图加载失败，请重新加载'
})
</>
结束地图实例以及加载完成。
遇到的问题
1. 使用插件
// 异步加载插件
AMap.plugin(['AMap.ToolBar', 'AMap.Geocoder'], () => {
// 添加插件
map.addControl(new AMap.ToolBar())
// 把插件实例赋值给变量
geocoder = new AMap.Geocoder()
})
2. 判断是否在国内，通过逆编码通过坐标获取地址，国外会解析失败。
// 重点：逆编码需要配合秘钥使用
window._AMapSecurityConfig = {
securityJsCode: '秘钥'
}
clickMap(e) {
let lng = e.lnglat.getLng()
let lat = e.lnglat.getLat()
geocoder.getAddress(e.lnglat, (status, result) => {
// 判断是否为国内
if (status === 'complete') {}
}
}
3. 添加一个marker标准写法
getMarkerData({ lng, lat }) {
var marker = new AMap.Marker({
// 标准的经纬度数据对象，不用new AMap.LngLat 也可以。
position: new AMap.LngLat(lng, lat),
icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/fyylqeh7pldnuhpqnuhd/anchor.png',
// 偏移量：定位到icon的箭头
offset: new AMap.Pixel(-16, -30),
// 自定义数据
extData: {
id: `${lng}${lat}`
}
})
marker.on('click', this.clickMarker)
return marker
},
4. 如何获取一个marker的信息
clickMarker(e) {
// 获取自定义数据
let id = e.target.getExtData().id
let item = submitData.find(item => item.id === id)
currentMarker = item
// 显示信息框
this.openInfoWindow(currentMarker)
currentMarker.circle.setOptions({
strokeColor: '#F33',
fillColor: '#ee2200'
})
},
5. 信息窗口：使用vue组件
<>
<div>
// 引入组件，使用组件。
// 注意只能v-show，因为需要dom
<info-window
v-show="showInfoWindow"
ref="infoWindow">
</info-window>
</div>
-
// 创建一个自定义内容的 infowindow 实例
let infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30),
// 使用组件
content: this.$refs['infoWindow'].$el,
isCustom: true,
autoMove: true
})
infoWindow.open(map, [lng, lat])
</>
6. 改变遮盖物数据
currentMarker.circle.setOptions({
strokeColor: '#3989FA',
fillColor: '#3989FA'
})
