百度地图InfoWindow去掉关闭按钮

最新做项目遇到的需求是进入页面百度地图默认显示信息窗体，且不显示关闭按钮，效果如图所示

1、 安装相关依赖后在main.js中引入

import BaiduMap from 'vue-baidu-map-3x';
app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '你自己申请的密匙'
});

2、新建组件baidu.index

<template>
  <div>
      <div class="app-container">
        <div style="margin: 5px">
          <baidu-map
          	class="bm-view"
          	:center="coordinate"
          	:zoom="ruleForm.mapZoom"
          	:scroll-wheel-zoom="true"
          	@ready="handlerBMap">
            <bm-info-window 
            	:position="coordinate"
            	:show="show"
            	:closeOnClick="false">
              <div style="display: flex; flex-direction: column;">
                <span style="margin-bottom: 8px">{{ title }}</span>
                <span>地址：{{ address }}</span>
              </div>
            </bm-info-window>
          </baidu-map>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  props:['title', 'address', 'coordinate'],
  data () {
    return {
      ruleForm: {
        mapZoom: 15,
        mapCenter: { lng: 126.543727, lat: 43.835562},
        address: '', // 地址
        coordinate: ''
      },
      show: true
    }
  },
}
</script>

<style lang="scss" scoped>
  .bm-view {
      width: 100%;
      height: 420px;
  }
</style>

3、在页面中引用

<template>
	<baiduMap :title="title" :address="address" :coordinate="coordinate" />
</template>
<script>
	import baiduMap from './component/baidu.vue';
	export default {
		components: {
		    baiduMap
		},
		data() {
    const getImageUrl = (name) => {
      return new URL(`../../page/portal/static/config/${name}`, import.meta.url).href
    }
    return {
      title: '伯曼公寓',
      address: '这是一个测试地址',
      coordinate: {lng: 117.236835, lat: 38.951618}
    }
  },
}
</script>

关键代码

// 写在公共样式，不然会因为scope不生效
.BMap_pop>img {
  width: 0 !important;
  height: 0 !important;
}