百度地图开发：多点标记 JSON 格式信息窗口自定义样式 InfoBox 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图开发示例</title>
<style type="text/css">
#map {
height: 400px;
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
<script>
// 创建地图实例
var map = new BMap.Map("map");
// 设置地图中心点
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
<p>// 添加多个标记点
var points = [
{
lng: 116.404, lat: 39.915, title: "点1", content: "这是点1的详细信息"
},
{
lng: 116.414, lat: 39.905, title: "点2", content: "这是点2的详细信息"
},
{
lng: 116.424, lat: 39.895, title: "点3", content: "这是点3的详细信息"
}
];</p>
<p>for (var i = 0; i < points.length; i++) {
var marker = new BMap.Marker(new BMap.Point(points[i].lng, points[i].lat));
map.addOverlay(marker);</p>
<p>// 绑定点击事件，弹出信息窗口
marker.addEventListener("click", function(){
var infoBox = new BMapLib.InfoBox(map, "<div style='width:200px;padding:10px 20px;'>" + points[i].content + "</div>", {
boxStyle : {
background : "#fff",
borderRadius : "5px",
boxShadow : "0 0 10px #888",
width: "300px"
},
closeIconMargin: "4px 4px 4px 4px",
enableAutoPan: true,
offset: new BMap.Size(0, -20)
});
infoBox.open(this);
});
}
</script></p>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pK9Q 著作权归作者所有。请勿转载和采集!