高德地图点聚合改进

项目要求需要用到点聚合https://lbs.amap.com/api/javascript-api/example/marker/markerclusterer/←这种

复制下来照着葫芦画瓢就行，但这个葫芦并不十分满足我们的需求

最后的圈圈上显示信息

要在最后的圆圈上显示信息，只需要配置marker的MarkerOptions的content在里边加上文字可以。

 content: '<div style="font-size:12px; color: yellow;background-color: hsla(180, 100%, 50%, 0.7);' +
                      ' height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">' +
                      '<div style="transform:scale(0.8);margin-top: -30%">'+point_name[i]+'</div></div>',

贼jb丑，当然可以重新绘制一下marker的样式，让marker变成一个背景为白色的长方形，这是迫不得已的妥协。不要忘了点聚合的每一个点本身是一个Marker对象，是Marker对象就有属性和方法https://lbs.amap.com/api/javascript-api/reference/overlay#marker

可以给Marker添加属性

 marker.point_name = point_name[i];

我给marker加一个point_name属性值为这个marker的站点名称，然后将这个marker推入数组中，作为点聚合渲染的依据

   for (var i = 0; i < points.length; i += 1) {
//            markers.push(new AMap.Marker({
              var marker = new AMap.Marker({
                  position: points[i]['lnglat'],
                  content: '<div style="font-size:12px; color: yellow;background-color: hsla(180, 100%, 50%, 0.7);' +
                      ' height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">' +
                      '<div style="transform:scale(0.8);margin-top: -30%">'+point_name[i]+'</div></div>',
                  offset: new AMap.Pixel(-15, -15)
              })
              marker.point_name = point_name[i];
              markers.push(marker);
//        )
        }

循环遍历给Marker添加事件，点击Marker的时候打开信息窗体

      for(var i = 0; i<1500;i++) {
            markers[i].on('mouseover', function (e) {
                console.log(e.target.point_name);
                infoWindow.setContent("<div style='background:rgba(255,255,255,0.71);width:150px;font-size:14px;padding:1px 10px 10px 10px'>" +
                    "<h3 style='text-align: center; margin-bottom: 4px'><span>" + e.target.point_name + "</span></h3>" +
                    "</div>");
                infoWindow.open(map_pointPolymerization, e.lnglat);
            })
        }

当然信息窗体也是高德地图的一个内置对象https://lbs.amap.com/api/javascript-api/reference/infowindow/?sug_index=2

 infoWindow = new AMap.InfoWindow({
                            isCustom: true,   //是否自定义窗体
                            closeWhenClickMap: true, //是否在点击地图后关闭窗体
                            draggable: true,  //是否可拖动
                            offset: new AMap.Pixel(0, -20),
                            content: ""
                        });

完整代码

//点聚合
var cluster,markers = [];
$.ajax({
    url: 'js/gdmap/data/线路渲染数据作为小车的依据.json',  //全部公交线路
    type: "get",
    dataType: "json",
    success: function (d) {
        var arr_lnglat = [];
        for(var i = 0,len = d.length; i < len; i++){
            for(var j = 0,leng = d[i].points.length; j<leng; j++){
                arr_lnglat.push(JSON.parse("{\"lnglat\":[\""+d[i].points[j].lnglat[0]+"\",\""+d[i].points[j].lnglat[1]+"\"]}"));
            }
        }

        var arr_point_name = [];
        for(var i = 0,len = d.length; i < len; i++){
            for(var j = 0,leng = d[i].points.length; j<leng; j++){
                arr_point_name.push(d[i].points[j].name);
            }
        }
        console.log(arr_point_name[6])

        var points = arr_lnglat;
        window.point_name = arr_point_name;
        for (var i = 0; i < points.length; i += 1) {
//            markers.push(new AMap.Marker({
              var marker = new AMap.Marker({
                  position: points[i]['lnglat'],
                  content: '<div style="font-size:12px; color: yellow;background-color: hsla(180, 100%, 50%, 0.7);' +
                      ' height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">' +
                      '<div style="transform:scale(0.8);margin-top: -30%">'+point_name[i]+'</div></div>',
                  offset: new AMap.Pixel(-15, -15)
              })
              marker.point_name = point_name[i];
              markers.push(marker);
//        )
        }
    }
})

function addCluster(tag) {
    if (cluster) {
        cluster.setMap(null);
    }if (tag == 1) {//自定义图标
        var sts = [{
            url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
            size: new AMap.Size(32, 32),
            offset: new AMap.Pixel(-16, -16)
        }, {
            url: "https://a.amap.com/jsapi_demos/static/images/green.png",
            size: new AMap.Size(32, 32),
            offset: new AMap.Pixel(-16, -16)
        }, {
            url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
            size: new AMap.Size(36, 36),
            offset: new AMap.Pixel(-18, -18)
        }, {
            url: "https://a.amap.com/jsapi_demos/static/images/red.png",
            size: new AMap.Size(48, 48),
            offset: new AMap.Pixel(-24, -24)
        }, {
            url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
            size: new AMap.Size(48, 48),
            offset: new AMap.Pixel(-24, -24)
        }];
        cluster = new AMap.MarkerClusterer(map_pointPolymerization, markers, {
            styles: sts,
            gridSize: 50
        });
    } else {//默认样式
        cluster = new AMap.MarkerClusterer(map_pointPolymerization, markers, {
            gridSize: 50
        });
        console.log(point_name[2]);
        for(var i = 0; i<1500;i++) {
            markers[i].on('mouseover', function (e) {
                console.log(e.target.point_name);
                infoWindow.setContent("<div style='background:rgba(255,255,255,0.71);width:150px;font-size:14px;padding:1px 10px 10px 10px'>" +
                    "<h3 style='text-align: center; margin-bottom: 4px'><span>" + e.target.point_name + "</span></h3>" +
                    "</div>");
                infoWindow.open(map_pointPolymerization, e.lnglat);
            })
        }
    }
}
setTimeout(function () {
    addCluster(0)
},1000)
//点聚合END

最终效果

点击小圆圈的时候弹出infowindow

高德地图点聚合改进

最后的圈圈上显示信息

完整代码

最终效果

猜你喜欢