高德地图marker标记点的setLabel，在不同层级下控制显示隐藏

vue中使用高德地图marker标记点的setLabel，在不同层级下控制显示隐藏
设置点标注的文本标签
marker.setLabel({
  offset: new AMap.Pixel(1, 0), //设置文本标注偏移量
  content: '<div>' + name + '</div>', //设置文本标注内容
  direction: 'top', //设置文本标注方位
});
1
2
3
4
5
监听地图层级变化
let _this = this;
var logMapChange = function () {
  var mapZoom = _this.map.getZoom(); //获取当前地图级别
  if (mapZoom < 15) {
    _this.hideMarkerLabel(marker);
  } else {
    _this.showMarkerLabel(marker);
  }
};
_this.map.on('zoomchange', logMapChange); //监听
1
2
3
4
5
6
7
8
9
10
标签显示

showMarkerLabel(marker) {
    marker.setLabel({
        offset: new AMap.Pixel(1, 0), //设置文本标注偏移量
        content: '<div>' + marker._originOpts.title + '</div>', //设置文本标注内容
        direction: 'top', //设置文本标注方位
    });
}
1
2
3
4
5
6
7
标签隐藏

hideMarkerLabel(marker) {
  marker.setLabel({
    offset: new AMap.Pixel(1, 0), //设置文本标注偏移量
    content: '',
    direction: 'top', //设置文本标注方位
  });
}
1
2
3
4
5
6
7
标签样式外部写入
.amap-marker-label {
  padding: 2px 6px;
  border-radius: 5px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  text-align: center;
  font-size: 14px;
  border: 0;
}
1
2
3
4
5
6
7
8
第二种方法
也可以在content: '< div />'里写入style，动态传参绑定display属性的’none’和’null’值