百度地图开发：多点标记 JSON 格式，自定义弹窗样式代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图多点标记示例</title>
<style type="text/css">
#container {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
<script>
// 创建地图实例
var map = new BMap.Map("container");
// 设置中心点坐标和地图级别
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
<p>// 创建自定义信息窗口样式
function createInfoWindow(content) {
var infoWindowStyle = '<div style="border: 1px solid #ccc; background-color: #fff; padding: 10px;">' +
'<div style="font-weight: bold; margin-bottom: 5px;">' + content.title + '</div>' +
'<div>' + content.address + '</div>' +
'</div>';
return new BMap.InfoWindow(infoWindowStyle);
}</p>
<p>// 定义多个标记点的数据
var markersData = [
{
title: '标记点1',
address: '北京市海淀区',
point: new BMap.Point(116.404, 39.915)
},
{
title: '标记点2',
address: '北京市朝阳区',
point: new BMap.Point(116.505, 39.92)
},
{
title: '标记点3',
address: '北京市东城区',
point: new BMap.Point(116.404, 39.945)
}
];</p>
<p>// 遍历标记点数据，创建标记并添加事件监听
for (var i = 0; i &lt; markersData.length; i++) {
var markerData = markersData[i];
var marker = new BMap.Marker(markerData.point);
map.addOverlay(marker);</p>
<p>// 绑定信息窗口事件
(function (data) {
marker.addEventListener('click', function () {
var infoWindow = createInfoWindow(data);
this.openInfoWindow(infoWindow);
});
})(markerData);
}
</script></p>
</body>
</html>