百度地图开发：多点标注 InfoBox 信息窗显示问题解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图开发示例</title>
<style type="text/css">
#mapContainer {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGi"></script>
<script type="text/javascript" src="static/admin_img/map/js/infoBox.js"></script>
<script type="text/javascript">
// 初始化地图
var map = new BMap.Map("mapContainer");
var point = new BMap.Point(108.34138,22.819153); //定义一个中心点坐
//let cityName = "南宁市";
//map.setCenter(cityName); // 设置地图显示的城市 此项是必须设置的
map.centerAndZoom(point, 16);
map.setMapStyle({style:'midnight'});
map.enableScrollWheelZoom();
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl({
type: BMAP_NAVIGATION_CONTROL_LARGE,
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: new BMap.Size(40, 250)
}));
<pre><code>// 自定义信息窗样式
var infoBoxStyle = {
width: "200px",
height: "100px",
border: "1px solid #ccc",
borderRadius: "5px",
backgroundColor: "#000",
padding: "10px",
fontSize: "14px",
lineHeight: "20px",
color:"#fff",
};
// 添加多个标注
var markers = [
{point: new BMap.Point(108.361812,22.819742), title: "反恐点1", content: "这是标注1的内容"},
{point: new BMap.Point(108.341304,22.819313), title: "反恐点2", content: "这是标注2的内容"},
{point: new BMap.Point(108.328287,22.824908), title: "反恐点3", content: "这是标注3的内容"}
];
for (var i = 0; i < markers.length; i++) {
var marker = new BMap.Marker(markers[i].point);
console.log(markers[i].title);
map.addOverlay(marker);
// 创建信息窗实例
var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
boxStyle: infoBoxStyle,
closeIconMargin: "10px 10px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
// 点击标注时打开信息窗
marker.addEventListener("click", function () {
infoBox.open(this);
});
// 点击信息窗的关闭按钮时关闭信息窗
infoBox.addEventListener("close", function () {
infoBox.close();
});
// 添加信息窗标题和关闭按钮
var infoBoxContent = document.createElement("div");
infoBoxContent.innerHTML = "<h3>" + markers[i].title + "</h3>" +
"<a href='javascript:void(0);' onclick='closeInfoBox()'>关闭</a>";
infoBox.setContent(infoBoxContent);
}
// 关闭当前信息窗
function closeInfoBox() {
infoBox.close();
}
</code></pre>
</script>
</body>
</html>
代码有错，地图上只显示一个标注点，再修改一下内容：在代码中，你只创建了一个infoBox实例，并且在循环中重复使用了这个实例，导致只有最后一个标注点的信息窗口能够正常显示。要解决这个问题，你可以为每个标注点分别创建一个infoBox实例。修改后的代码如下：
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图开发示例</title>
<style type="text/css">
#mapContainer {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGi"></script>
<script type="text/javascript" src="static/admin_img/map/js/infoBox.js"></script>
<script type="text/javascript">
// 初始化地图
var map = new BMap.Map("mapContainer");
var point = new BMap.Point(108.34138,22.819153); //定义一个中心点坐
//let cityName = "南宁市";
//map.setCenter(cityName); // 设置地图显示的城市 此项是必须设置的
map.centerAndZoom(point, 16);
map.setMapStyle({style:'midnight'});
map.enableScrollWheelZoom();
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl({
type: BMAP_NAVIGATION_CONTROL_LARGE,
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: new BMap.Size(40, 250)
}));
// 自定义信息窗样式
var infoBoxStyle = {
width: "200px",
height: "100px",
border: "1px solid #ccc",
borderRadius: "5px",
backgroundColor: "#000",
padding: "10px",
fontSize: "14px",
lineHeight: "20px",
color:"#fff",
};
// 添加多个标注
var markers = [
{point: new BMap.Point(108.361812,22.819742), title: "反恐点1", content: "这是标注1的内容"},
{point: new BMap.Point(108.341304,22.819313), title: "反恐点2", content: "这是标注2的内容"},
{point: new BMap.Point(108.328287,22.824908), title: "反恐点3", content: "这是标注3的内容"}
];
for (var i = 0; i < markers.length; i++) {
var marker = new BMap.Marker(markers[i].point);
console.log(markers[i].title);
map.addOverlay(marker);
// 创建信息窗实例
var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
boxStyle: infoBoxStyle,
closeIconMargin: "10px 10px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
// 点击标注时打开信息窗
marker.addEventListener("click", openInfoBox(infoBox));
// 点击信息窗的关闭按钮时关闭信息窗
infoBox.addEventListener("close", function () {
infoBox.close();
});
// 添加信息窗标题和关闭按钮
var infoBoxContent = document.createElement("div");
infoBoxContent.innerHTML = "<h3>" + markers[i].title + "</h3>" +
"<a href='javascript:void(0);' onclick='closeInfoBox()'>关闭</a>";
infoBox.setContent(infoBoxContent);
}
// 打开信息窗
function openInfoBox(infoBox) {
return function() {
infoBox.open(this);
}
}
// 关闭当前信息窗
function closeInfoBox() {
infoBox.close();
}
</script>
</body>
</html>
</code></pre>
<p>在上面的代码中，我将点击标注时打开信息窗的事件处理函数改为了一个闭包函数，这样每个闭包函数都有自己独立的infoBox实例。同时，我还为每个infoBox实例添加了关闭按钮的事件处理函数。这样，每个标注点都能正常显示信息窗口，并且能够关闭对应的信息窗口。</p>
原文地址: https://www.cveoy.top/t/topic/pNal 著作权归作者所有。请勿转载和采集!