百度地图开发：多点标注示例代码及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); // 初始化地图，设置中心点坐标和地图级别
<pre><code> 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>
</code></pre>
</body>
</html>
在上面的代码中，需要将`您的百度地图API密钥`替换为您自己的百度地图API密钥。数据部分使用了一个包含三个标注的JSON格式数据，每个标注包括名称(`name`)、经度(`lng`)和纬度(`lat`)。
<p>通过循环遍历数据，创建标注并添加到地图中。同时，为每个标注创建一个文本标注(<code>BMap.Label</code>)，并将其设置为标注的文本标签。</p>
<p>最后，将地图显示在页面上的<code><div></code>元素中，设置了一个id为<code>map</code>。</p>
<p>您可以将以上代码保存为一个html文件，然后在浏览器中打开该文件，即可看到多个标注在地图上显示的效果。</p>
原文地址: https://www.cveoy.top/t/topic/pNaE 著作权归作者所有。请勿转载和采集!