百度地图开发多点标注json格式数据infoBoxjs实现自定义信息窗 完整的代码

以下是一个使用百度地图开发，多点标注和自定义信息窗的完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图开发 - 多点标注和自定义信息窗</title>
    <style type="text/css">
        #map {
            width: 100%;
            height: 400px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="map"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
<script type="text/javascript">
    // 多点标注的json格式数据
    var markersData = [
        {
            "name": "标注点1",
            "lng": 116.404,
            "lat": 39.915
        },
        {
            "name": "标注点2",
            "lng": 116.419,
            "lat": 39.915
        },
        {
            "name": "标注点3",
            "lng": 116.404,
            "lat": 39.925
        }
    ];

    // 百度地图初始化
    var map = new BMap.Map("map");
    var point = new BMap.Point(116.404, 39.915); // 设置地图中心点
    map.centerAndZoom(point, 15); // 设置地图缩放级别

    // 添加多点标注
    for (var i = 0; i < markersData.length; i++) {
        var marker = new BMap.Marker(new BMap.Point(markersData[i].lng, markersData[i].lat));
        marker.setTitle(markersData[i].name);
        map.addOverlay(marker);

        // 添加信息窗口
        var content = '<div style="font-size: 14px; padding: 20px;">' +
            '<strong>' + markersData[i].name + '</strong>' +
            '</div>';
        addInfoWindow(marker, content);
    }

    // 自定义信息窗口
    function addInfoWindow(marker, content) {
        var opts = {
            width: 200,     // 信息窗口宽度
            height: 100,    // 信息窗口高度
            title: marker.getTitle()  // 信息窗口标题
        };

        var infoWindow = new BMap.InfoWindow(content, opts);
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
        });
    }
</script>
</body>
</html>

请注意将代码中的你的百度地图API密钥替换为您自己的百度地图API密钥。

这段代码使用百度地图API创建了一个地图对象，并使用markersData数组中的数据创建了多个标注点，并给每个标注点添加了自定义信息窗口。在addInfoWindow函数中，使用BMap.InfoWindow创建了一个自定义的信息窗口，并将其与标注点关联起来。当点击标注点时，会打开对应的信息窗口。

希望对你有帮助

百度地图开发多点标注json格式数据infoBoxjs实现自定义信息窗完整的代码

百度地图开发多点标注json格式数据infoBoxjs实现自定义信息窗 完整的代码

百度地图开发多点标注json格式数据infoBoxjs实现自定义信息窗完整的代码