本篇文章主要是高德地图的多点聚合，及多个marker点击事件
以下为简单的模拟数据
soogif (1).gif
image.png
具体代码如下
点聚合
html,
body,
#container {
height: 100%;
width: 100%;
}
var cluster, markers = [];
// 地图初始化
var map = new AMap.Map("container", {
resizeEnable: true,
center: [105, 34],
zoom: 4
});
// 模拟数据
let list = [{
lnt: 113.951955,
lat: 22.530825,
content: "aaa",
url: "/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg"
}, {
lnt: 116.397428,
lat: 39.90923,
content: "bbb",
url: "/timg?image&quality=80&size=b9999_10000&sec=1605524499220&di=061f5404ccf4b56ca5109c6a74cad7e8&imgtype=0&src=http%3A%2F%%2Felement_origin_min_pic%2F18%2F01%2F15%2Fecc1be26af0ccb3aab8a64cbc1d7d5b9.jpg"
}, {
lnt: 117.000923,
lat: 36.675807,
content: "ccc",
url: "/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg"
}, {
lnt: 112.89114340293699,
lat: 38.06208615376387,
content: "ddd",
url: "/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg"
}, {
lnt: 116.303843,
lat: 39.983412,
content: "eee",
url: "/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg"
}, {
lnt: 108.94444,
lat: 34.14248,
content: "fff",
url: "/timg?image&quality=80&size=b9999_10000&sec=1605524653591&di=fce2171454e6d4d44545e51b41bb4224&imgtype=0&src=http%3A%2F%%2Foriginal_pic%2F19%2F03%2F18%2Fbf2928abcd5f96beab12f7a8611614c5.jpg"
}, {
lnt: 121.472644,
lat: 31.231706,
content: "ggg",
url: "/timg?image&quality=80&size=b9999_10000&sec=1605524499220&di=061f5404ccf4b56ca5109c6a74cad7e8&imgtype=0&src=http%3A%2F%%2Felement_origin_min_pic%2F18%2F01%2F15%2Fecc1be26af0ccb3aab8a64cbc1d7d5b9.jpg"
}, //上海
{
lnt: 121.506377,
lat: 31.245105,
content: "hhh",
url: "/timg?image&quality=80&size=b9999_10000&sec=1605524653591&di=fce2171454e6d4d44545e51b41bb4224&imgtype=0&src=http%3A%2F%%2Foriginal_pic%2F19%2F03%2F18%2Fbf2928abcd5f96beab12f7a8611614c5.jpg"
}, {
lnt: 121.392735,
lat: 31.083714,
content: "iii",
url: " /70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 107.0138,
lat: 33.0436,
content: "jjjj",
url: "/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
}, //汉中
{
lnt: 108.95,
lat: 34.27,
content: "kkkk",
url: "/timg?image&quality=80&size=b9999_10000&sec=1605524499220&di=061f5404ccf4b56ca5109c6a74cad7e8&imgtype=0&src=http%3A%2F%%2Felement_origin_min_pic%2F18%2F01%2F15%2Fecc1be26af0ccb3aab8a64cbc1d7d5b9.jpg"
}, {
lnt: 109.11,
lat: 35.09,
content: "lll",
url: "/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
}, {
lnt: 110.51,
lat: 38.83,
content: "mmm",
url: " /70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg"
}, {
lnt: 109.77,
lat: 38.3,
content: "nnnn",
url: "/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
}, {
lnt: 106.16,
lat: 33.34,
content: "oooo",
url: "/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg"
},
]
list.map((data) => {
// 海量生成marker点
var marker = new AMap.Marker({
position: new AMap.LngLat(data.lnt, data.lat),
title: data.title,
content: `
`,
offset: new AMap.Pixel(-15, -15)
})
var a = "/users/27c303b4ef55/followers"
content = `
${data.content},${data.lnt},${data.lat}
详情
`
content.replace(/undefined/g, "");
// 窗体信息
let infoWindow = new AMap.InfoWindow({
content: content, //使用默认信息窗体框样式，显示信息内容
offset: new AMap.Pixel(0, -15),
});
//监听marker的点击事件
AMap.event.addListener(marker, "click", function(e) {
infoWindow.open(
map,
// 窗口信息的位置
marker.getPosition(data.lnt, data.lat)
);
})
markers.push(marker)
//添加监听事件，当前缩放级别
AMap.event.addListener(map, 'zoomend', function() {
var zoom = map.getZoom();
// 关闭信息窗体
map.clearInfoWindow(infoWindow);
});
});
//使用renderClusterMarker属性实现聚合点的完全自定义绘制
var count = markers.length;
var _renderClusterMarker = function(context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 1px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
if (cluster) {
cluster.setMap(null);
}
// 点聚合样式
cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 80
});
