本篇文章主要是高德地图的多点聚合，及多个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: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg"

}, {

lnt: 116.397428,

lat: 39.90923,

content: "bbb",

url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524499220&di=061f5404ccf4b56ca5109c6a74cad7e8&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F01%2F15%2Fecc1be26af0ccb3aab8a64cbc1d7d5b9.jpg"

}, {

lnt: 117.000923,

lat: 36.675807,

content: "ccc",

url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg"

}, {

lnt: 112.89114340293699,

lat: 38.06208615376387,

content: "ddd",

url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg"

}, {

lnt: 116.303843,

lat: 39.983412,

content: "eee",

url: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg"

}, {

lnt: 108.94444,

lat: 34.14248,

content: "fff",

url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524653591&di=fce2171454e6d4d44545e51b41bb4224&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Foriginal_pic%2F19%2F03%2F18%2Fbf2928abcd5f96beab12f7a8611614c5.jpg"

}, {

lnt: 121.472644,

lat: 31.231706,

content: "ggg",

url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524499220&di=061f5404ccf4b56ca5109c6a74cad7e8&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F01%2F15%2Fecc1be26af0ccb3aab8a64cbc1d7d5b9.jpg"

}, //上海

{

lnt: 121.506377,

lat: 31.245105,

content: "hhh",

url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524653591&di=fce2171454e6d4d44545e51b41bb4224&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Foriginal_pic%2F19%2F03%2F18%2Fbf2928abcd5f96beab12f7a8611614c5.jpg"

}, {

lnt: 121.392735,

lat: 31.083714,

content: "iii",

url: " https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",

},

{

lnt: 107.0138,

lat: 33.0436,

content: "jjjj",

url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",

}, //汉中

{

lnt: 108.95,

lat: 34.27,

content: "kkkk",

url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524499220&di=061f5404ccf4b56ca5109c6a74cad7e8&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F01%2F15%2Fecc1be26af0ccb3aab8a64cbc1d7d5b9.jpg"

}, {

lnt: 109.11,

lat: 35.09,

content: "lll",

url: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",

}, {

lnt: 110.51,

lat: 38.83,

content: "mmm",

url: " https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg"

}, {

lnt: 109.77,

lat: 38.3,

content: "nnnn",

url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",

}, {

lnt: 106.16,

lat: 33.34,

content: "oooo",

url: "https://ss3.bdstatic.com/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 = "https://www.jianshu.com/users/27c303b4ef55/followers"

content = `

`

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

});