Baidu Map InfoWindow removes the close button

The latest requirement encountered in the project is to enter the page Baidu map to display the information window by default, and not to display the close button, the effect is shown in the figure
insert image description here

1. Import in main.js after installing related dependencies

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

2. Create a new component 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. Reference in the page

<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>

key code

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

Supongo que te gusta

Origin blog.csdn.net/FJ101113/article/details/131283867
Recomendado
Clasificación