百度地图开发 多点标注 json格式数据 完整的示例代码

下面是一个完整的示例代码，用于在百度地图上进行多点标注的开发，并使用JSON格式的数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图多点标注示例</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>
    <style type="text/css">
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = new BMap.Map("map"); // 创建地图实例
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

        var data = [
            {
                "name": "标注1",
                "lng": 116.404,
                "lat": 39.915
            },
            {
                "name": "标注2",
                "lng": 116.405,
                "lat": 39.916
            },
            {
                "name": "标注3",
                "lng": 116.406,
                "lat": 39.917
            }
        ];

        for (var i = 0; i < data.length; i++) {
            var marker = new BMap.Marker(new BMap.Point(data[i].lng, data[i].lat)); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            var label = new BMap.Label(data[i].name, { offset: new BMap.Size(20, -10) }); // 创建文本标注
            marker.setLabel(label); // 设置标注的文本标签
        }
    </script>
</body>
</html>

在上面的代码中，需要将您的百度地图API密钥替换为您自己的百度地图API密钥。数据部分使用了一个包含三个标注的JSON格式数据，每个标注包括名称(name)、经度(lng)和纬度(lat)。

通过循环遍历数据，创建标注并添加到地图中。同时，为每个标注创建一个文本标注(BMap.Label)，并将其设置为标注的文本标签。

最后，将地图显示在页面上的<div>元素中，设置了一个id为map。

您可以将以上代码保存为一个html文件，然后在浏览器中打开该文件，即可看到多个标注在地图上显示的效果

百度地图开发 多点标注 json格式数据 完整的示例代码

百度地图开发多点标注 json格式数据完整的示例代码