高德地圖點聚合改進

       

目錄

最後的圈圈上顯示信息

完整代碼 

最終效果

---

       項目要求需要用到點聚合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