百度地图开发 多点标记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);

    // 创建自定义信息窗口样式
    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);
    }

    // 定义多个标记点的数据
    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)
        }
    ];

    // 遍历标记点数据，创建标记并添加事件监听
    for (var i = 0; i < markersData.length; i++) {
        var markerData = markersData[i];
        var marker = new BMap.Marker(markerData.point);
        map.addOverlay(marker);

        // 绑定信息窗口事件
        (function (data) {
            marker.addEventListener('click', function () {
                var infoWindow = createInfoWindow(data);
                this.openInfoWindow(infoWindow);
            });
        })(markerData);
    }
</script>
</body>
</html>

以上代码中，需要将你的百度地图API密钥替换为你申请的百度地图API密钥。同时，可以根据需要自定义信息窗口的样式。

在示例代码中，创建了一个地图实例，并设置了中心点坐标和地图级别。然后，定义了多个标记点的数据，并遍历数据创建标记，并绑定了点击事件，点击标记时弹出对应的信息窗口。在事件处理函数中，调用createInfoWindow函数创建自定义样式的信息窗口，并通过openInfoWindow方法打开信息窗口。

注意：在使用百度地图API之前，需要在百度地图开放平台申请一个API密钥

百度地图开发 多点标记json格式 点击弹出对应信息窗口自定义样式 代码实现

百度地图开发多点标记json格式点击弹出对应信息窗口自定义样式代码实现