百度地图开发：多点标注，JSON数据，x,y坐标相连，InfoBox信息窗，完整示例代码
<!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>
<p>// 地图初始化
var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 设置中心点坐标
map.centerAndZoom(point, 15); // 设置地图级别</p>
<p>// 添加多个点标注
var markers = [
{ x: 116.404, y: 39.915, content: "这是第一个点" },
{ x: 116.414, y: 39.925, content: "这是第二个点" },
{ x: 116.424, y: 39.935, content: "这是第三个点" }
];</p>
<p>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);</p>
<p>// 添加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
});</p>
<p>marker.addEventListener("click", function () {
infoBox.open(this);
});
}</p>
<p>// 启用滚轮缩放
map.enableScrollWheelZoom(true);</p>
原文地址: https://www.cveoy.top/t/topic/pNdj 著作权归作者所有。请勿转载和采集!