<template>
<div>
<div id="map_container" ref="container" class="map-container"></div>
<input type="checkbox" v-model="zfcheck"> 政府
</div>
</templat>
<script>
const carIcon = require("xxx/xxx.png");
import { darkStyle } from "./darkStyle.js"; //自定义模式
export default {
data() {
return {
map: null,
xjcheck: zfcheck,
}
},
watch: {
zfcheck(newVal, oldVal) {
if (newVal) {
this.map.clearOverlays(); //清除图层覆盖物
const local = new BMapGL.LocalSearch(this.map, {
renderOptions: { map: this.map, panel: "r-languageResult" },
onInfoHtmlSet: function(params, html) {
html.innerHTML =`<div style="font-size:30px;white-space:nowrap;font-weight: bold;">`+params.title+`</div>`+
`<div style="font-size:30px;white-space:nowrap;">地址:`+params.address+`</div>`;
},
pageCapacity: 40
});
local.search("政府");
} else {
this.map.clearOverlays(); //清除图层覆盖物
}
}
//学校、医院等都可以使用这种方式自定义弹窗
},
mounted() {
this.init();
},
methods: {
initMap() {
// 地图初始化
const center = [113.55934, 22.271431];
this.map = new BMapGL.Map(this.$refs.container, {
restrictCenter: false,
maxZoom: 25,
minZoom: 8,
displayOptions: {
building: false,
},
});
this.map.setMapStyleV2({
styleJson: darkStyle
//参考链接https://lbsyun.baidu.com/custom/list.htm
});
this.map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 21); //设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true); //允许地图可被鼠标滚轮缩放
this.map.enableKeyboard(); //启用键盘操作,默认禁用
this.map.enableInertialDragging(); //启用地图惯性拖拽,默认禁用
this.map.setDisplayOptions({
indoor: false
});
//监听地图缩放事件;
this.map.addEventListener("zoomend", ()=> {
this.map.setTilt(0); // 设置地图的倾斜角度
this.map.setHeading(0); //方向偏移
});
},
}
}
</script>
<style scoped>
::v-deep .BMap_bubble_content{
width: 500px !important;
color: #fff !important;
top: -20px !important;
line-height: 55px !important;
font-size: 23px !important;
}
::v-deep .BMap_bubble_pop {
background-color: #121b4d !important;
border: 5px solid #408bde !important;
width: 550px !important;
text-align: center;
}
::v-deep .BMap_bubble_top {
height: 31px !important;
}
::v-deep .BMap_bubble_title {
display: hidden;
color: #fff !important;
width: 550px !important;
line-height: 50px !important;
}
::v-deep .BMap_bubble_title p {
display: none !important;
}
::v-deep .BMap_bubble_title p a {
//详情 链接
display: none !important;
}
::v-deep .BMap_bubble_pop &>img {
display: none !important;
}
</style>
效果图: