最近写项目搞地图需求,需要用百度地图的标点跟展示信息,但是infoWindow改样式很麻烦,我突然想到可以用el-popover来实现,具体代码如下
地图组件中使用marker方法
//只需要用marker方法就可以实现
this.markers.forEach(marker => {
const point = new window.BMapGL.Point(marker.lng, marker.lat);
const icon = new window.BMapGL.Icon(marker.icon, new window.BMapGL.Size(20, 20));
const markerObj = new window.BMapGL.Marker(point, { icon: icon });
const infoWindow = new window.BMapGL.InfoWindow(popHtml || '', {
offset: new window.BMapGL.Size(0, -20),
enableAutoPan: false,
});
markerObj.addEventListener('mouseover', function (e) {
// 返回鼠标位置信息
const pixel = new window.BMapGL.Pixel(e.clientX, e.clientY)
_this.$emit('markerMouseover', marker, pixel);
});
markerObj.addEventListener('mouseout', function () {
_this.$emit('markerMouseout', marker, infoWindow);
});
const label = new window.BMapGL.Label(marker.name, {
position: point,
offset: new window.BMapGL.Size(-30, 15), // 将Label覆盖物放置在标点下方
fontSize: '10px',
backgroundColor: '#fff', // 设置背景颜色为白色
border: 'none !important', // 去掉Label覆盖物的边框
});
this.baidu.addOverlay(label);
this.baidu.addOverlay(markerObj);
});
父组件中调用这两个暴露的方法和el-popover
<el-popover class="posinfopopper" :style="{ top: popy + 'px', left: popx + 'px' }"
ref="posinfopopper"
id="mappoper"
popper-class="mappopper"
placement="right"
width="300"
trigger="hover"
:popper-options="{ boundariesElement: 'viewport', gpuAcceleration: false, }"
v-model="showposinfo">
<!-- 你的自定义窗口结构 -->
</el-popover>
调用这两个方法就可以显示隐藏了,
markerMouseover (marker, pixel) {
console.log(marker, pixel);
this.showposinfo = true
this.mapType = marker.type
this.info.name = marker.name
this.popy = pixel.y - 50
this.popx = pixel.x - 300
},
markerMouseout (marker, infoWindow) {
this.showposinfo = false;
},