先上效果图:
之前虽然实现了,但是点击这个标点,文本框显示时总是在标点右下方,拉动地图就跳到如上图所示的位置,太鬼畜了
实现代码:
initPoint(res, map) {
//第一个for循环是遍历标点
for (let i = 0; i < res.length; i++) {
let list = '';
//第二个for循环是遍历文本框内容的
for (let j = 0; j < res[i].cp_data.length; j++) {
list += `<li class="pointBox-ftdata">
${res[i].cp_data[j].name}<span class="pointBox-span">${res[i].cp_data[j].rtd}${res[i].cp_data[j].unit}</span>
</li>`
}
//创建标点
let marker = new AMap.Marker({
position: [res[i].longitude, res[i].latitude],//这个是标点位置
topWhenClick: true,//这个是把文本框固定到标点头上的(没写的话,点击标点时,文本框会出现在标点右下方)
map: map//这个是初始化的地图
})
marker.setLabel({
content: `<div class='pointBox'>
<li class="pointBox-etname">${res[i].enterprise_name}</li>
<li class="pointBox-eqname">
${res[i].equipment_name}
<li>
${list}
</div>`,
offset: new AMap.Pixel(0, 0),//偏移位置的参数
direction: "top"//这个也是固定文本框位置的
})
//下面这个是标点的点击事件,控制文本框显示或隐藏,方法比较笨,有什么更好的方法请多多指教
marker.on('click', (e) => {
if (e.target._y.style.display === "") {
e.target._y.style.display = "none";
} else if (e.target._y.style.display === "none") {
e.target._y.style.display = "block";
} else {
e.target._y.style.display = "none";
}
});
marker.emit('click', {target: marker})
}
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。