关于在vue-cli v2.0版本中高德地图标点文本框的实现(文本框定位出错问题)

先上效果图:

关于在vue-cli v2.0版本中高德地图标点文本框的实现(文本框定位出错问题)_第1张图片

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

实现代码:

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 += `
  • ${res[i].cp_data[j].name}${res[i].cp_data[j].rtd}${res[i].cp_data[j].unit}
  • ` } //创建标点 let marker = new AMap.Marker({ position: [res[i].longitude, res[i].latitude],//这个是标点位置 topWhenClick: true,//这个是把文本框固定到标点头上的(没写的话,点击标点时,文本框会出现在标点右下方) map: map//这个是初始化的地图 }) marker.setLabel({ content: `
  • ${res[i].enterprise_name}
  • ${res[i].equipment_name}
  • ${list}
  • `, 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}) } },

    你可能感兴趣的:(vue.js高德地图文本框)