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

以下是一个使用百度地图API进行多点标注和自定义信息窗的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图开发示例</title>
    <style type="text/css">
        #mapContainer {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>
<script type="text/javascript">
    // 初始化地图
    var map = new BMap.Map("mapContainer");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 12);

    // 自定义信息窗样式
    var infoBoxStyle = {
        width: "200px",
        height: "100px",
        border: "1px solid #ccc",
        borderRadius: "5px",
        backgroundColor: "#fff",
        padding: "10px",
        fontSize: "14px",
        lineHeight: "20px"
    };

    // 添加多个标注
    var markers = [
        {point: new BMap.Point(116.404, 39.915), title: "标注1", content: "这是标注1的内容"},
        {point: new BMap.Point(116.414, 39.925), title: "标注2", content: "这是标注2的内容"},
        {point: new BMap.Point(116.424, 39.935), title: "标注3", content: "这是标注3的内容"}
    ];

    for (var i = 0; i < markers.length; i++) {
        var marker = new BMap.Marker(markers[i].point);
        map.addOverlay(marker);

        // 创建信息窗实例
        var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
            boxStyle: infoBoxStyle,
            closeIconMargin: "10px 10px 0 0",
            enableAutoPan: true,
            align: INFOBOX_AT_TOP
        });

        // 点击标注时打开信息窗
        marker.addEventListener("click", function () {
            infoBox.open(this);
        });

        // 点击信息窗的关闭按钮时关闭信息窗
        infoBox.addEventListener("close", function () {
            infoBox.close();
        });

        // 添加信息窗标题和关闭按钮
        var infoBoxContent = document.createElement("div");
        infoBoxContent.innerHTML = "<h3>" + markers[i].title + "</h3>" +
            "<a href='javascript:void(0);' onclick='closeInfoBox()'>关闭</a>";
        infoBox.setContent(infoBoxContent);
    }

    // 关闭当前信息窗
    function closeInfoBox() {
        infoBox.close();
    }
</script>
</body>
</html>

请替换代码中的您的百度地图API密钥为您自己的百度地图API密钥。这段代码会在页面上显示一个地图，并在地图上添加三个标注，每个标注点击时会弹出一个自定义样式的信息窗，信息窗中包含标题和关闭按钮。点击关闭按钮或地图其他位置可以关闭当前信息窗

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

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