高德地图开发实战：点标注与数据展示
一、基础点标注实现
1. 创建地图实例
// 初始化地图
var map = new AMap.Map('map-container', {
zoom: 11, // 缩放级别
center: [116.397428, 39.90923], // 中心点坐标(北京)
viewMode: '2D' // 使用2D视图
});
2. 添加简单点标记
// 创建点标记
var marker = new AMap.Marker({
position: [116.397428, 39.90923], // 经纬度位置
title: '北京市中心', // 鼠标悬停显示的文字
map: map // 关联的地图实例
});
3. 自定义点标记样式
// 使用自定义图标
var marker = new AMap.Marker({
position: [116.397428, 39.90923],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
offset: new AMap.Pixel(-10, -30), // 图标偏移量
map: map
});
二、批量添加点标注
1. 使用数据数组创建多个标记
var points = [
{name: "点1", lnglat: [116.397428, 39.90923]},
{name: "点2", lnglat: [116.407428, 39.91923]},
{name: "点3", lnglat: [116.387428, 39.89923]}
];
points.forEach(function(point) {
new AMap.Marker({
position: point.lnglat,
title: point.name,
map: map
});
});
2. 使用点聚合优化大量标记
// 准备大量点数据
var markers = [];
for (var i = 0; i < 100; i++) {
var lng = 116.3 + Math.random() * 0.2;
var lat = 39.8 + Math.random() * 0.2;
markers.push(new AMap.Marker({
position: [lng, lat],
content: '<div class="cluster-marker">' + (i + 1) + '</div>'
}));
}
// 创建点聚合
var cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 80, // 聚合网格像素大小
renderClusterMarker: function(context) {
// 自定义聚合点样式
var count = context.count;
var div = document.createElement('div');
div.className = 'cluster';
div.innerHTML = count;
return div;
}
});
三、信息窗口与数据展示
1. 基本信息窗口
// 创建信息窗口内容
var infoContent = '<div class="info-window">' +
'<h4>北京市中心</h4>' +
'<p>天安门广场位于北京市中心</p>' +
'</div>';
// 创建信息窗口
var infoWindow = new AMap.InfoWindow({
content: infoContent,
offset: new AMap.Pixel(0, -30)
});
// 点击标记打开信息窗口
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
2. 动态数据绑定
// 模拟数据
var locations = [
{id: 1, name: "王府井", address: "北京市东城区", lnglat: [116.417854, 39.915988]},
{id: 2, name: "西单", address: "北京市西城区", lnglat: [116.379028, 39.913423]}
];
// 创建标记和信息窗口
locations.forEach(function(location) {
var marker = new AMap.Marker({
position: location.lnglat,
title: location.name,
map: map
});
// 动态生成信息窗口内容
marker.on('click', function() {
var content = `<div class="info-card">
<h4>${location.name}</h4>
<p>地址: ${location.address}</p>
<button onclick="showDetail(${location.id})">查看详情</button>
</div>`;
infoWindow.setContent(content);
infoWindow.open(map, marker.getPosition());
});
});
// 详情函数
function showDetail(id) {
console.log('查看详情:', id);
// 这里可以跳转页面或发起AJAX请求获取更多数据
}
四、高级功能实现
1. 点标注动画效果
// 弹跳动画
function bounceMarker(marker) {
marker.setAnimation('AMAP_ANIMATION_BOUNCE');
setTimeout(function() {
marker.setAnimation(null);
}, 1000);
}
// 使用
marker.on('click', function() {
bounceMarker(this);
});
2. 点标注拖拽与事件
// 可拖拽标记
var draggableMarker = new AMap.Marker({
position: [116.397428, 39.90923],
draggable: true, // 开启拖拽
map: map
});
// 拖拽事件
draggableMarker.on('dragend', function(e) {
console.log('标记被拖拽到:', e.lnglat);
infoWindow.setContent('新位置: ' + e.lnglat);
infoWindow.open(map, e.lnglat);
});
3. 热力图数据展示
// 准备热力图数据
var heatmapData = [
{lng: 116.297428, lat: 39.80923, count: 10},
{lng: 116.397428, lat: 39.90923, count: 20},
{lng: 116.497428, lat: 39.80923, count: 15}
];
// 创建热力图
var heatmap = new AMap.Heatmap(map, {
radius: 25, // 热力点半径
opacity: [0, 0.8] // 透明度范围
});
// 设置数据集
heatmap.setDataSet({
data: heatmapData,
max: 100 // 权重值
});
五、实践与优化
-
性能优化：
- 对于大量点数据(>1000)，使用点聚合(Cluster)
- 使用WebGL渲染方式提升性能
- 合理设置zoomRange，只在特定缩放级别显示标记
-
代码组织：
- 将地图相关功能封装成独立模块
- 使用数据驱动的方式管理标记状态
- 实现标记与业务数据的双向绑定
-
用户体验：
- 添加加载动画
- 实现平滑的标记过渡效果
- 提供清晰的交互反馈
-
错误处理：
- 处理地图加载失败情况
- 验证坐标数据有效性
- 添加边界检查防止标记超出可视区域
六、完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图点标注示例</title>
<style>
#map-container {width: 100%; height: 600px;}
.info-window {padding: 10px;}
.cluster-marker {
width: 20px; height: 20px;
background: #3388ff;
border-radius: 50%;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div id="map-container"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图Key"></script>
<script>
// 初始化地图
var map = new AMap.Map('map-container', {
zoom: 12,
center: [116.397428, 39.90923]
});
// 添加多个标记
var markers = [];
for (var i = 0; i < 50; i++) {
var lng = 116.3 + Math.random() * 0.2;
var lat = 39.8 + Math.random() * 0.2;
markers.push(new AMap.Marker({
position: [lng, lat],
content: '<div class="cluster-marker">' + (i + 1) + '</div>'
}));
}
// 点聚合
var cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 80
});
// 信息窗口
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30)
});
// 点击地图关闭信息窗口
map.on('click', function() {
infoWindow.close();
});
</script>
</body>
</html>
以上是高德地图点标注与数据展示的开发实战指南，涵盖了从基础到高级的各种应用场景。实际开发中可根据需求灵活组合这些功能。
(www.nzw6.com)
