高德自定义覆盖物信息窗体，站点名称显示；

最新推荐文章于 2023-03-27 18:09:26 发布

Aha-

最新推荐文章于 2023-03-27 18:09:26 发布

阅读量486

点赞数 1

文章标签： javascript vue.js reactjs typescript es6

本文链接：https://blog.csdn.net/weixin_42626335/article/details/107160556

版权

效果图，数据需自己模拟；

val = {
    name: 'xxx城市',
    position: [123.34534566,41.423443]
}


let marker = new AMap.Marker({
     icon:new AMap.Icon({
     image:'https://a.amap.com/jsapi_demos/static/resource/img/pin.png',
     size:new AMap.Size(32,32),
     imageSize:new AMap.Size(32,32)
     }),

     offset:new AMap.Pixel(-16,-32),
     position: val.position,
     map: map,
     title: val.name,
     });


      marker.setLabel({
      offset: new AMap.Pixel(30, 1),
      content: val.name, //设置文本标注内容
      direction: 'right', //设置文本标注方位
      style: labelStyle   // 自定义文本样式
      });
      marker.setMap(map);



/**
* labelStyle 自定义样式如下:
* backgroundColor: "#0c64dee3"
* fillColor: "white"
*/

}