百度地图开发多点标注 infoBox信息窗 以下代码运行有错误多点标注不显示请帮我检查代码哪里出错？!DOCTYPE htmlhtmlhead meta charset=utf-8 title百度地图开发示例title style type=textcss #mapContainer position absolute; width 10
<p>代码中存在以下问题：</p>
<ol>
<li>引用的百度地图API的链接中，ak参数需要替换为有效的密钥。</li>
<li>引用的infoBox.js文件路径不正确，需要根据实际文件路径进行修改。</li>
<li>在创建信息窗实例时，align参数的值应该是字符串类型的INFOBOX_AT_TOP，而不是变量INFOBOX_AT_TOP。</li>
<li>在点击标注时打开信息窗的事件监听函数中，需要使用闭包来保存每个标注对应的信息窗实例，否则会出现只有最后一个信息窗能正常打开的问题。</li>
</ol>
<p>修改后的代码如下：</p>
<!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=your_ak"></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) {
return function () {
infoBox.open(this);
};
})(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 closeInfoBox() {
infoBox.close();
}
</code></pre>
</script>
</body>
</html
原文地址: http://www.cveoy.top/t/topic/h4cs 著作权归作者所有。请勿转载和采集!