地图点击事件不生效

何以解忧灬唯有暴富

已于 2024-07-09 10:35:05 修改

阅读量130

点赞数 3

文章标签：前端

于 2024-06-03 12:05:54 首次发布

本文链接：https://blog.csdn.net/qq_38308109/article/details/139411051

版权

高德地图自定义文本标记点击事件半边不生效（已解决）

使用审查元素即可发现，自定义文本大小设计比较小，文字超出自定义文本宽度，鼠标点击无效。
只需将自定义文本宽度加宽

自定义文本动态计算文字代码宽度

// An highlighted block
 var myIcon = new AMap.Icon({
         size: new AMap.Size(14 * dataList[i].name.length / 2 + 56, 38 +19),//14 为字体大小 * 文字个数
         image: url,//图标
         imageSize: new AMap.Size(52, 38),	//图片大小
         imageOffset: new AMap.Pixel(0, 19) //图标偏移量
       })



//创建标注文本
              var labcontent = `<div class="info"
                 style="color:#fff;
                  background-color:rgba(22,255,175,0.20);
                  border-radius:6px;
                  border-color:#16ffaf;
                  padding:0 10px 10px 10px;
                  font-size:14px;
                  border:solid 1px #16ffaf;
                  cursor:pointer;
                  height:36px;
                  line-height:36px;
                  font-family: "Source Han Sans CN;">${dataList[i].shortName}</div>` //设置文本标注内容
              marker.setLabel({
                offset: new AMap.Pixel( -14 * dataList[i].name.length / 2 -5  , -10 ), //设置文本标注偏移量  设置负值  覆盖到自定义文本内
                content: labcontent,
                direction: 'right', //设置文本标注方位
              })