javascript
复制代码
let that= this
var points = [
{ lnglat: ["120.556168", "36.205298"] },
{ lnglat: ["120.556268", "36.205287"] },
{ lnglat: ["120.553368", "36.205276"] },
{ lnglat: ["120.626468", "36.205265"] },
{ lnglat: ["120.656568", "36.205254"] },
{ lnglat: ["120.556668", "36.205243"] },
];
var count = points.length;
// 自定义聚合点样式
var _renderClusterMarker = function (context) {
// 聚合中点个数
var clusterCount = context.count;
var div = document.createElement("div");
let bgColor = "232, 64, 51";
div.style.backgroundColor = "rgba(" + bgColor + ",.5)";
var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40);
div.style.width = div.style.height = size + "px";
div.style.border = "solid 1px rgba(" + bgColor + ",1)";
div.style.borderRadius = size / 2 + "px";
div.innerHTML = context.count;
div.style.lineHeight = size + "px";
div.style.color = "#ffffff";
div.style.fontSize = "12px";
div.style.textAlign = "center";
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
};
// 自定义非聚合点样式
var _renderMarker = function (context) {
let arr = [];
arr.push({
longitude: context.data[0].lnglat.lng,
latitude: context.data[0].lnglat.lat,
});
var content =
'<div class="wrap-icon" style="">' +
'<div class="icon"><i class="iconfont icon-feidaoluyidongyuan"></i></div>' +
'<div class="sanjiao"></div>' +
"</div>";
var offset = new AMap.Pixel(-9, -9);
context.marker.setContent(content);
context.marker.setOffset(offset);
};
that.addCluster(_renderClusterMarker, _renderMarker, points);
javascript
复制代码
// 聚合
addCluster(_renderClusterMarker, _renderMarker, points) {
if (this.cluster) {
this.cluster.setMap(null);
}
//自定义图标
var sts = [
{
// url: "//a.amap.com/jsapi_demos/static/images/blue.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16),
},
];
this.cluster = new AMap.MarkerCluster(this.myMap, points, {
styles: sts,
gridSize: 60,
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
});
},