【VUE-地图】百度地图不用infoWindow实现自定义悬浮框_vue地图悬浮窗口

最近写项目搞地图需求，需要用百度地图的标点跟展示信息，但是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;
    },

最终效果