在使用高德地圖API的過(guò)程中，發(fā)現(xiàn)2.0版本的點(diǎn)聚合和之前版本的使用上有很大的區(qū)別，在此做一下點(diǎn)聚合的使用以及點(diǎn)標(biāo)記的事件的記錄。

在2.0之前的版本，MarkerClusterer插件的使用如下：

new AMap.MarkerClusterer(
? ? //地圖實(shí)例對(duì)象
? ? map:Map,  
? ? //marker類(lèi)構(gòu)造對(duì)象
? ? markers:Array<Marker>,  ? 
? ? //點(diǎn)聚合屬性，具體可查閱https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer
? ? opts:MarkerClustererOptions 
)

而2.0版本對(duì)MarkerClusterer進(jìn)行了改動(dòng)

new AMap.MarkerClusterer(
    //地圖實(shí)例對(duì)象
    map:Map,  
    //經(jīng)緯度數(shù)組對(duì)象
    dataOptions:Array   
    //點(diǎn)聚合屬性
    markerClusterOptions:Object 
)

dataOptions:[
? ? {
? ? ? ? weight: Number, //權(quán)重(可選)以權(quán)重高的點(diǎn)為中心進(jìn)行聚合
? ? ? ? lnglat: Array //經(jīng)緯度數(shù)組 string[] | number[]
? ? }
]

在2.0版本中，markerClusterOptions去掉了minClusterSize 集合的最小數(shù)量，zoomOnclick 點(diǎn)擊聚合點(diǎn)時(shí)是否散開(kāi);對(duì)renderClusterMarker屬性進(jìn)行了修改,去掉了renderClusterMarker:function的markers屬性；新增了renderMarker: function 用于實(shí)現(xiàn)非聚合點(diǎn)的自定義設(shè)置

new AMap.MarkerClusterer(map, marker, { 
? ? gridSize: number, //聚合計(jì)算時(shí)網(wǎng)格的像素大小，默認(rèn)60
? ? //minClusterSize 聚合的最小數(shù)量（已棄用）
? ? maxZoom: number, //最大聚合級(jí)別，超出級(jí)別不進(jìn)行聚合，默認(rèn)18
? ? averageCenter: boolean, //聚合點(diǎn)的圖標(biāo)位置是否是所有聚合內(nèi)點(diǎn)的中心點(diǎn)，默認(rèn)true，如果有權(quán)重則以權(quán)重高的為中心進(jìn)行聚合
? ? clusterByZoomChange: boolean, //地圖縮放過(guò)程中是否聚合,默認(rèn)false
? ? styles: Array<Object>, //聚合后點(diǎn)標(biāo)記樣式
? ? //styles包含以下屬性
? ? ? ? //url{string} （必選）圖標(biāo)的url地址
? ? ? ? //size{AMap.Size} （必選）圖標(biāo)的圖片大小
? ? ? ? //offset{AMap.Pixel} （可選）圖標(biāo)相對(duì)于左上角的偏移量
? ? ? ? //imageOffset{AMap.Pixel} （可選）圖片在可視區(qū)域的偏移量
? ? ? ? //textColor{String} （可選）文字顏色，默認(rèn)#000000
? ? ? ? //textSize{Number} （可選）文字大小，默認(rèn)10
? ? renderClusterMarker: (cluster: any) => {
? ? ? ? cluster.count //當(dāng)前聚合點(diǎn)下marker的數(shù)量
? ? ? ? cluster.marker //當(dāng)前聚合點(diǎn)的marker對(duì)象
    },
? ? renderMarker: (context: any) => {
? ? ? ? context.marker //非聚合點(diǎn)的marker對(duì)象
? ? }
? ? //zoomOnClick 點(diǎn)擊聚合點(diǎn)時(shí)是否散開(kāi)（已棄用）
}）        

點(diǎn)聚合及點(diǎn)標(biāo)記的鼠標(biāo)移入、移出、點(diǎn)擊效果的實(shí)現(xiàn)(只提供思路，不進(jìn)行數(shù)據(jù)效果實(shí)現(xiàn))文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-649886.html

const markerData: any[] //獲取的標(biāo)記坐標(biāo)等信息
const markers: [{
? ? weight: number, //權(quán)重
? ? lnglat: number[] | string [], //經(jīng)緯度
? ? extData:object //其他需要傳遞的信息，如id、name等
}] = [] 

markerData.map((item: any) => {
? ? markers.push({
? ? ? ? weight: item.weight,
? ? ? ? lnglat: [item.lon, item.lat],
? ? ? ? extData: {
? ? ? ? ? ? id: item.id,
? ? ? ? ? ? icon: url,
? ? ? ? ? ? markerIcon: url
? ? ? ? }
? ? })
})

const clu = new AMap.MarkerClusterer(map, markers, {
? ? //聚合點(diǎn)自定義樣式交互
? ? renderClusterMarker: (cluster: any) = {
? ? ? ? //marker點(diǎn)標(biāo)記API
        //自定義聚合樣式
? ? ? ? //cluster.data[0].extData可獲取到傳入的其他數(shù)據(jù)
? ? ? ? cluster.marker.setAnchor('bottom-center');
? ? ? ? cluster.marker.setIcon(new AMap.Icon({ image: cluster.data[0].extData.markerIcon }));
? ? ? ? cluster.marker.setLabel({
? ? ? ? ? ? content: `<span style="cursor: pointer;">${cluster.count}</span>`,
? ? ? ? ? ? direction: 'center',
? ? ? ? ? ? offset: new AMap.Pixel(0, -5),
? ? ? ? })
? ? ? ? //添加鼠標(biāo)移入放大效果
? ? ? ? cluster.marker.on('mouseover', () => {
? ? ? ? ? ? cluster.marker.setIcon(
? ? ? ? ? ? ? ? new AMap.Icon({
? ? ? ? ? ? ? ? ? ? image: cluster.marker.getIcon()._opts.image,
                    size: new AMap.Size(40, 50), //根據(jù)image分辨率計(jì)算放大后尺寸
                    imageSize: new AMap.Size(40, 50),
? ? ? ? ? ? ? ? }),
? ? ? ? ? ? );
? ? ? ? ? ? cluster.marker.setLabel({
? ? ? ? ? ? ? ? content: `<span style="cursor: pointer;font-size: 20px;">${cluster.count}</span>`,
? ? ? ? ? ? ? ? direction: 'center',
                offset: new AMap.Pixel(0, -5),
            });
? ? ? ? });
? ? ? ? //鼠標(biāo)移出還原
? ? ? ? cluster.marker.on('mouseout', () => {
? ? ? ? ? ? cluster.marker.setIcon(
? ? ? ? ? ? ? ? new AMap.Icon({
                ? ? image: cluster.marker.getIcon()._opts.image,
                    size: new AMap.Size(32, 40),
                    imageSize: new AMap.Size(32, 40),
? ? ? ? ? ? ? ? }),
? ? ? ? ? ? );
? ? ? ? ? ? cluster.marker.setLabel({
 ? ? ? ? ? ? ? ? content: `<span style="cursor: pointer;">${cluster.count}</span>`,
                 direction: 'center',
                 offset: new AMap.Pixel(0, -5),
? ? ? ? ? ? });
? ? ? ? });
? ? },
? ? //非聚合點(diǎn)自定義樣式交互
? ? renderMarker: (context: any) => {
? ? ? ? context.marker.setAnchor('bottom-center');
? ? ? ? context.marker.setOffset(new AMap.Pixel(0, 0));
? ? ? ? context.marker.setIcon(new AMap.Icon({ image: context.data[0].extData.markerIcon }));
? ? ? ? context.marker.setLabel({
? ? ? ? ? ? content: `<img src=${context.data[0].extData.icon} style="cursor: pointer;" />`,
            direction: 'center',
            offset: new AMap.Pixel(0, -5),
? ? ? ? });
? ? ? ? //鼠標(biāo)移入移出同上，不再重復(fù)
? ? ? ? //marker鼠標(biāo)點(diǎn)擊事件
? ? ? ? context.marker.on('click', () => {
? ? ? ? ? ? const params = context.data[0].extData;
? ? ? ? ? ? console.log(params.id) //id
? ? ? ? });
? ? }
})
//添加聚合點(diǎn)點(diǎn)擊事件
clu.on('click', (data: any) => {
? ? //判斷是否是聚合點(diǎn)，不是聚合點(diǎn)就執(zhí)行單個(gè)點(diǎn)擊方式
? ? if (data.clusterData.length <= 1) return;
? ? //計(jì)算所有聚合點(diǎn)的中心點(diǎn)
? ? let alng = 0,
? ? ? ? alat = 0;
? ? for (const m of data.clusterData) {
? ? ? ? alng += m.lnglat.lng;
? ? ? ? alat += m.lnglat.lat;
? ? }
? ? const lat = alat / data.clusterData.length;
? ? const lng = alng / data.clusterData.length;
? ? //以中心點(diǎn)固定倍數(shù)放大地圖，達(dá)到展開(kāi)聚合點(diǎn)的效果
? ? map.setZoom(10);
? ? map.setCenter([lng, lat]);
});