vue-baidu-map中点击图标icon事件失效导致打不开信息窗体bm-info-window

环境

Window10、Vue2、配置：“vue-baidu-map”: “^0.21.22”（0.21.22），除此之前还引入了mapv：

<script src="http://mapv.baidu.com/build/mapv.js"></script>

问题

预期效果：只要点击了图标，就打开信息窗

目前效果：第一次点击可以打开信息窗体，后面鼠标click事件失效，都不能打开信息窗体，除非刷新页面，并且控制台报错：vue-baidu-map TypeError: Cannot read properties of null (reading ‘canvas’)

---

解决方法

1. 前提

一、排查是不是点击事件失效？
二、排查是不是覆盖了一模一样的图层layer？
三、有没有别的覆盖层，会不会是层级z-index的问题？

2. 解决

后面又看源码，又看回官方文档（这个vue-baidu-map的插件实在太旧了，这个需求比较着急，没办法立马换掉），尝试了以下代码：

<template>
  <baidu-map class="baidu-map" :center="mapCenter" :zoom="mapZoom" :double-click-zoom="true" :inertial-dragging="true"
    :auto-resize="true" :scroll-wheel-zoom="true" @ready="handleMapReady" @zoomend="handleMapZoomEnd"
    @moveend="handleMapMoveEnd">
    <!-- 资源详情信息窗体 -->
    <bm-info-window :position="resInfoWindow.position" title="详情" :show="resInfoWindow.show"
      @close="handleResInfoWindowClose" @open="handleResInfoWindowOpen">
      <div v-html="resInfoWindow.content"></div>
    </bm-info-window>
  </baidu-map>
</template>


<script>
export default {
	methods: {
		handleResInfoWindowClose(e) {
	      this.resInfoWindow.show = false
	    },
	    handleResInfoWindowOpen(e) {
	      this.resInfoWindow.show = true
	    },
	}
}
</script>

参考文档绑定了close事件，open事件就没有问题了，可以正常开关信息窗体

应该因为把百度地图组件化了，信息窗体组件watch监听了show这个值，有变化才回显示信息窗体，但是我们没绑定close事件，导致任何情况都是show为true，组件监听不到变化，（个人猜想，没看源码，很懒）

---

总结

个人建议还是别用这个老掉牙的库了，比例尺最多只能到50米，现在最新版都5米了。有空就换成原生的，自己封装一个vue-baidu-map。最后，希望这篇文章能帮助到大家！