关于vue.js:关于在vuecli-v20版本中高德地图标点文本框的实现文本框定位出错问题

33次阅读

共计 1047 个字符,预计需要花费 3 分钟才能阅读完成。

先上效果图:

之前尽管实现了,然而点击这个标点,文本框显示时总是在标点右下方,拉动地图就跳到如上图所示的地位,太鬼畜了

实现代码:

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})
      }
    },

正文完
 0