web开发-高德地图api2.0-点聚合-包含设置非聚合点的事件绑定以及样式

最新推荐文章于 2024-06-27 14:34:23 发布

活出高姿态

最新推荐文章于 2024-06-27 14:34:23 发布

阅读量1.2k

点赞数 1

文章标签：高德地图API 点聚合事件绑定自定义样式地图开发

本文链接：https://blog.csdn.net/weixin_43750649/article/details/119987159

版权

web开发-高德地图api2.0-点聚合-包含设置非聚合点的事件绑定以及样式

下面展示一些 内联代码片。

//非聚合点数据（lnglat里的坐标不一定要双引号）
var points = [
 { weight: 8, lnglat: ["108.939621", "34.343147"] },
 { weight: 1, lnglat: ["112.985037", "23.15046"] },
 { weight: 1, lnglat: ["110.361899", "20.026695"] },
 { weight: 1, lnglat: ["121.434529", "31.215641"] }
];
//聚合点样式（也可以通过renderClusterMarker 属性来设置）
var styles =[{
    url:xxx,
    size:new AMap.Size(30,39),
    offset:new AMap.Pixel(-15,-39),
    textColor:'#0000FF',
    textSize:16,
},];
// 加载点聚合插件
map.plugin(["AMap.MarkerCluster"],function(){
    cluster = new AMap.MarkerCluster(map, points, {
        maxZoom:11,
        clusterByZoomChange:true,
        styles:styles,
        //渲染非聚合点时会调用该方法，有一个object参数，其中有一个marker属性，就是该非聚合点对应的marker对象，可以通过获取该marker，设置该非聚合点的icon,事件等等
        renderMarker:function (object){
            object.marker.setIcon(icon),
            //绑定点击事件
            object.marker.on('click',function({
	                xxxxx
            })),
        }
    });
});