高德地图marker标记点的setLabel,在不同层级下控制显示隐藏
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;
}
第二种方法
也可以在content: '< div />'里写入style,动态传参绑定display属性的’none’和’null’值