最新做项目遇到的需求是进入页面百度地图默认显示信息窗体,且不显示关闭按钮,效果如图所示
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;
}