infoBox文档地址: https://api.map.baidu.com/library/InfoBox/1.2/docs/symbols/BMapLib.InfoBox.html
infobox依赖文件可以到这里下载:https://gitee.com/shiguangliangyi/dependent-file/blob/00d37b1ba2ffbbfd309305449711b4e7378878b5/infobox.js
1.引入
2.使用
//初始化地图
initMap() {
let self = this;
var map = new BMapGL.Map("map"); // 创建Map实例
map.centerAndZoom(
new BMapGL.Point(self.center.lng, self.center.lat),
self.zoom
); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapType(BMAP_NORMAL_MAP);
self.map = map;
window.map = map;
self.oldZoomNum = map.getZoom();
const zoomEvent = debounce(event, 300);
self.map.addEventListener("zoomend", zoomEvent);//监听地图缩放事件
self.map.setMapStyleV2({
styleJson: [
{
featureType: "poilabel",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "manmade",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "building",
elementType: "all",
stylers: {
visibility: "off",
},
},
],
});
// 地图缩放防抖-(这个是缩放地图重新更新覆盖物的)不用管
function debounce(fn, delay) {
let timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
let ZoomNum = map.getZoom(); //初始化为14
if (ZoomNum < self.oldZoomNum) {
//缩小
if (ZoomNum <= 14) {
self.zoomChange(0);
self.isPointMap = false;
}
} else {
//放大
if (ZoomNum >= 15 && !self.isPointMap) {
self.zoomChange(1);
self.isPointMap = true;
}
}
self.oldZoomNum = ZoomNum;
}, delay);
};
}
},
//添加图片覆盖物
markerClick(node) {
let point = new BMapGL.Point(node.lng, node.lat);
var myIcon = new BMapGL.Icon(
"/img/point.png",
new BMapGL.Size(25, 25),
{
anchor: new BMapGL.Size(25, 25),
}
);
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {
icon: myIcon });
this.map.addOverlay(marker);
let obj = {
item: item,
lng: lng,
lat: lat,
};
//覆盖物绑定点击事件,打开弹窗
marker.addEventListener("click", (e) => {
this.pointClick(obj);//点击事件传参
});
},
//
async pointClick(node) {
// infox弹窗
let strHtml = `<div class="content bor1" style="width:200px">
<div class='infoBox_content_title'>{
{
title}}</div>
<div class='infoBox_content_row'>今日上班人数:{
{
attNum}}</div>
<div class='infoBox_content_row'>备注信息:{
{
note}}</div>
</div>`;
let res = await getOperPointInfo(node.item.id);//查詢事件
strHtml = strHtml.replace("{
{title}}", node.item.name);
strHtml = strHtml.replace("{
{attNum}}", res.data.attNum);
strHtml = strHtml.replace("{
{note}}", res.data.note);
var infoBox = new BMapLib.InfoBox(map, strHtml, {
closeIconMargin: "0px 10px 0 0",
closeIconUrl: "/img/close.png",
closeIconWidth: "16px",
enableAutoPan: true,
// align: INFOBOX_AT_TOP,
offset: new BMapGL.Size(0, 30),
enableAutoPan: true,
});
let point = new BMapGL.Point(node.lng, node.lat);//打开的坐标点
infoBox.open(point);
},