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

本文链接：https://blog.csdn.net/weixin_43996368/article/details/121761341

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

设置点标注的文本标签

marker.setLabel({
  offset: new AMap.Pixel(1, 0), //设置文本标注偏移量
  content: '<div>' + name + '</div>', //设置文本标注内容
  direction: 'top', //设置文本标注方位
});

监听地图层级变化

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); //监听

标签显示

在这里插入图片描述

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

标签隐藏

在这里插入图片描述

hideMarkerLabel(marker) {
  marker.setLabel({
    offset: new AMap.Pixel(1, 0), //设置文本标注偏移量
    content: '',
    direction: 'top', //设置文本标注方位
  });
}

标签样式外部写入

.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;
}