在高德地图的应用中,地图上展示我们自己自定义覆盖物是很常见的应用,前提是需要覆盖物相应的定位点以及图标即可,但矢量图形不能直接展示图标,可以在信息框中展示;这里我就弄一个标记点的初始化,并且添加上信息框的展示,其他矢量图形类似:代码如下,
function init() {
//initPointList是初始化数据的列表
if (this.initPointList.length > 0) {
this.initPointList.map(it => {
//这里可以根据传入图标名称,在本地进行绘制,需要用require来引入
const imag = require('@/assets/images/map/' + it.icon + '.png')
//这里控制了图标显示的大小
const size = it.iconSize === 'small' ? 28 : it.iconSize === 'mid' ? 38 : 48
let position = []
const marker = new AMap.Marker({
zIndex: 200,
position: itposition, // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: it.name,
extData: {
id: it.id//添加自定义属性,用于高亮
},
icon: new AMap.Icon({
// 图标尺寸
size: new AMap.Size(size, size),
// 图标的取图地址
image: imag,//使用传入的图表标
// 图标所用图片大小
imageSize: new AMap.Size(size, size),
// 图标取图偏移量
// anchor:'center'
// imageOffset: new AMap.Pixel(0, 0)
})
})
//鼠标点击marker弹出自定义的信息窗体
AMap.event.addListener(marker, 'click', () => {
this.currentMsg = it
getAllOverlays('marker', it)
})
//把每个定位点添加到数据里面,可以批量控制它的显示与隐藏
this.pointMarkers.push(marker)
})
this.map.add(this.pointMarkers)
}
}
// 信息窗口初始化
function getAllOverlays (type, item) {
// 获取当 marker 类型的覆盖物
const info =createdInfo(item)
this.pointWindow = new AMap.InfoWindow({
position: position,
offset:new AMap.Pixel(-10, -35) ,
closeWhenClickMap: true,//鼠标点击地图任意位置,信息框消失
content: info.join(''),
})
this.pointWindow.open(this.map)
},
// 信息框里展示内容初始化,这里只写一个简单的名称,后续需要可以自己添加
function createdInfo(obj){
const info = []
info.push(`<p style='min-width:200px;' class='input-item'>名称 :${obj.name|| '未知'}</p>`)
return info
}
效果如下: