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.引入
index.html
<script type="text/javascript" src="../js/InfoBox.min.js"></script
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.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",
},
},
],
});
},
//添加图片覆盖物
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);//点击事件传参,打开弹窗
});
},
//重点 infobox的使用
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(this.map, strHtml, {
closeIconMargin: "0px 10px 0 0",
closeIconUrl: "/img/close.png",//关闭图标的图片路径
closeIconWidth: "16px",
offset: new BMapGL.Size(0, 30),//infobox偏移量
enableAutoPan: true,//自动偏移
});
this.oldInfoBox && this.oldInfoBox.close();//如果有别的弹窗先关闭
let point = new BMapGL.Point(node.lng, node.lat);//打开的坐标点
infoBox.open(point);
this.oldInfoBox=infoBox
},