高德地图开发(四、点聚合)
一、设置点聚合
只截取了部分代码,几个方法都处于一个类中。
let markers = []; // 点聚合数组
for (let i = 0; i < 10; i++) {
customMark();
}
initMarkerClusterer();
cluster.setMaxZoom(15);
// 添加自定义标记
function customMark () {
let lonlat = [Math.random() + 113, Math.random() + 23];
// 创建 AMap.Icon 实例:
let icon = new AMap.Icon({
size: new AMap.Size(58, 70), // 图标尺寸
image: 'http://localhost:8080/static/img/patrol.png', // Icon的图像
imageSize: new AMap.Size(58, 70) // 根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
let marker = new AMap.Marker({
position: new AMap.LngLat(lonlat[0], lonlat[1]),
offset: new AMap.Pixel(-10, -10),
icon: icon, // 添加 Icon 实例
title: '自定义图标',
zoom: 13
});
map.add(marker);
markers.push(marker);
}
// 初始化点聚合
function initMarkerClusterer () {
//添加聚合组件
map.plugin(["AMap.MarkerClusterer"],function() {
cluster = new AMap.MarkerClusterer(
map, // 地图实例
markers);
cluster.setMaxZoom(12);
});
}
// 添加点标记至点聚合中
this.addMarkerClusterer = function () {
let lonlat = [Math.random() + 113, Math.random() + 23];
// 创建 AMap.Icon 实例:
let icon = new AMap.Icon({
size: new AMap.Size(58, 70), // 图标尺寸
image: 'http://localhost:8080/static/img/patrol.png', // Icon的图像
imageSize: new AMap.Size(58, 70) // 根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
let marker = new AMap.Marker({
position: new AMap.LngLat(lonlat[0], lonlat[1]),
offset: new AMap.Pixel(-10, -10),
icon: icon, // 添加 Icon 实例
title: '自定义图标',
zoom: 13
});
markerEvent(marker, lonlat);
cluster.addMarker(marker);
}
二、点聚合中添加删除标记
// 添加点标记至点聚合中
this.addMarkerClusterer = function () {
let lonlat = [Math.random() + 113, Math.random() + 23];
// 创建 AMap.Icon 实例:
let icon = new AMap.Icon({
size: new AMap.Size(58, 70), // 图标尺寸
image: 'http://localhost:8080/static/img/patrol.png', // Icon的图像
imageSize: new AMap.Size(58, 70) // 根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
let marker = new AMap.Marker({
position: new AMap.LngLat(lonlat[0], lonlat[1]),
offset: new AMap.Pixel(-10, -10),
icon: icon, // 添加 Icon 实例
title: '自定义图标',
zoom: 13
});
markerEvent(marker, lonlat);
cluster.addMarker(marker);
}
// 删除点标记
cluster.removeMarker(marker);
三、方法和事件
https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer