百度地图开发 多点标注 json格式数据 xy坐标相连 infoBox信息窗 完整的示例代码

以下是一个完整的示例代码，展示如何在百度地图上进行多点标注，并添加infoBox信息窗。

首先，在HTML文件中引入百度地图的API和相关样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图多点标注示例</title>
    <style type="text/css">
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="map"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
</body>
</html>

然后，在JavaScript文件中编写地图初始化和多点标注的代码：

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

// 添加多个点标注
var markers = [
    { x: 116.404, y: 39.915, content: "这是第一个点" },
    { x: 116.414, y: 39.925, content: "这是第二个点" },
    { x: 116.424, y: 39.935, content: "这是第三个点" }
];

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

    // 添加infoBox信息窗
    var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
        boxStyle: {
            width: "200px",
            height: "80px"
        },
        closeIconMargin: "10px 2px 0 0",
        enableAutoPan: true,
        align: INFOBOX_AT_TOP
    });

    marker.addEventListener("click", function () {
        infoBox.open(this);
    });
}

// 启用滚轮缩放
map.enableScrollWheelZoom(true);

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

这段代码会在地图上添加三个点标注，并且每个点标注都可以点击弹出对应的infoBox信息窗。infoBox的样式可以根据需要进行调整。

希望这个示例能够帮助到你

百度地图开发多点标注 json格式数据 xy坐标相连 infoBox信息窗完整的示例代码

百度地图开发 多点标注 json格式数据 xy坐标相连 infoBox信息窗 完整的示例代码

百度地图开发多点标注 json格式数据 xy坐标相连 infoBox信息窗完整的示例代码