需求介绍
做项目的时候需要用到的功能，一个页面上，左边是各个地点，右边是地图，一开始把所有的点全都标注在地图上，点左边的每个地点后地图移动到以该点为中心，点击地图上的坐标点会显示出相关的信息。
对着百度地图的文档一点一点做出来了，先记下来，以作备用！！！
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图-多个坐标点一起显示</title>
<style>
body, html { width: 100%; height: 100%; margin: 0; padding: 0; }
#allmap { width: 80%; height: 100%; float: right; }
#location-list { width: 20%; height: 100%; float: left; overflow-y: auto; }
.location-item { padding: 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
.location-item:hover { background-color: #f0f0f0; }
</style>
[removed][removed]
</head>
<body>
水厂1
水厂2
水厂3
[removed][removed]
</body>
</html>JavaScript代码（map.js）
// 百度地图API初始化
var map = new BMap.Map("allmap");
// 坐标点数据
var points = [
{ lng: 116.404, lat: 39.915, title: "水厂1", content: "这是水厂1的详细信息
日供水能力：5000吨" },
{ lng: 116.414, lat: 39.925, title: "水厂2", content: "这是水厂2的详细信息
日供水能力：8000吨" },
{ lng: 116.424, lat: 39.935, title: "水厂3", content: "这是水厂3的详细信息
日供水能力：10000吨" }
];
// 设置中心点和缩放级别
var point = new BMap.Point(116.414, 39.925);
map.centerAndZoom(point, 14);
// 启用滚轮缩放
map.enableScrollWheelZoom(true);
// 添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
// 遍历添加标注点
for (var i = 0; i < points xss=removed xss=removed xss=removed xss=removed>" + pointData.title + "" +
"" + pointData.content + "
"
);
// 点击标注点打开信息窗口
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
});
// 自定义注标签（显示标题）
var label = new BMap.Label(pointData.title, {
offset: new BMap.Size(20, -10)
});
label.setStyle({
color: "#fff",
backgroundColor: "#3388ff",
border: "1px solid #3388ff",
borderRadius: "3px",
padding: "2px 6px",
fontSize: "12px"
});
marker.setLabel(label);
}
// 移动地图到指定位置
function moveToLocation(lng, lat, title) {
var point = new BMap.Point(lng, lat);
map.centerAndZoom(point, 15);
}代码说明
1. 初始化地图
通过new BMap.Map("allmap")创建地图实例，传入HTML容器ID，然后设置中心点坐标和缩放级别。
2. 多个坐标点标注
将所有坐标点数据存储在一个数组中，使用BMap.Point创建坐标点，BMap.Marker创建标注，再通过map.addOverlay()将标注添加到地图上。
3. 信息窗口
使用BMap.InfoWindow创建信息窗口，支持HTML内容。为每个标注点绑定click事件，点击时弹出对应的信息窗口。
4. 地图中心移动
通过map.centerAndZoom(point, zoom)可以将地图视图定位到指定坐标点，并设置缩放级别。
5. 自定义标签
使用BMap.Label可以为标注点添加文字标签，显示地点名称，并通过setStyle()自定义样式。
注意事项
- 需要先申请百度地图开放平台的AK（访问密钥），替换代码中的"您的百度地图AK"
- 百度地图API v3.0推荐使用JavaScript API GL（WebGL版本），性能更好
- 坐标点数据如果较多，建议使用批量标注或聚合标注来优化性能
- 实际项目中坐标点数据一般从后端接口动态获取
发表评论 取消回复