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