谷歌地图聚类标记

Question

我正在尝试在我的地图上添加集群，我使用的代码运行良好，但上面没有集群字符串，并且无法弄清楚我应该如何将集群添加到此代码中。

(function (namespace, $, undefined) {

    // map the namespace to that
    var that = namespace;

    var markers = [];
    var dealers = [];
    var googleMap;
    var tmpDealer = "";

   function AddMarkers(aar, map, show) {
        if (aar.length > 0) {
            var image = '/Files/Templates/Designs/Mobler/images/MapMarker.png';
            for (var i = 0; i < aar.length; i++) {
                markers.push( new google.maps.Marker({
                    position: new google.maps.LatLng(parseFloat( aar[i].Latitude),parseFloat(aar[i].Longitude)),
                    map: map,
                    title: aar[i].Name,
                    icon: image,
                    DealerId: aar[i].DealerId,
                    DealerPage: aar[i].Area
                }));
            }
            for (var i = 0; i < markers.length; i++) {
                if (show) {
                    google.maps.event.addListener(markers[i], "click", function () {

                      tmpDealer = this.DealerPage;
                      MoblerLandingPage.SetCookie("/Default.aspx" + tmpDealer, false);
                      MoblerLandingPage.SetAreaName("/Default.aspx?AreaID=" + this.DealerPage, function() {
                        setTimeout(function() {
                            var area = $.cookie("MoblerAreaName");
                            document.location = "http://" + document.domain + "/" + area;
                        }, 250);
                      });
                    });
                } else {
                    google.maps.event.addListener(markers[i], "click", that.onMarkerClick)
                }
            }
        }
    }


    var InfoBoxOptions2 = {
       content: ""
      , disableAutoPan: false
      , maxWidth: 0
      , pixelOffset: new google.maps.Size(-75, -5)
      , zIndex: null
      , boxClass: "DealerMapInfoBox"
      , closeBoxMargin: "5px"
      , closeBoxURL: "/Files/Templates/Designs/SmagOgBehag/images/infoBoxClose.png"
      , infoBoxClearance: new google.maps.Size(1, 1)
      , isHidden: false
      , pane: "floatPane"
      , enableEventPropagation: false
      , alignBottom : true
    };
    var infoBox2 = new InfoBox(InfoBoxOptions2);



    that.Initialize = function(mapId, dealerArray, show){
        dealers = dealerArray;

        var mapOptions = {
            center: new google.maps.LatLng(56.22, 11.32),
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        if(!show){
        var mapOptions = {
            center: new google.maps.LatLng(56.22, 11.32),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        }
        googleMap = new google.maps.Map(document.getElementById(mapId), mapOptions);



        if(dealerArray.constructor === Array && dealerArray.length > 0){
            AddMarkers(dealers, googleMap, show);


        }

        if(!show){

            google.maps.event.addListener(googleMap, 'click', function () {
                infoBox2.close();
            });
        }
    }

    that.onMarkerClick = function(){

        var marker = this;
        infoBox2.content_ = $('#Dealer' + marker.DealerId + ' li a').html();
        infoBox2.open(marker.map, marker);
    }

    that.ShowDealerOnMap = function(dealerId) {
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].DealerId == dealerId) {
            var marker = markers[i];
            marker.map.setZoom(15);
            marker.map.panTo(marker.getPosition())
            infoBox2.content_ = $('#Dealer' + marker.DealerId).html()
            infoBox2.open(marker.map, marker);
            }
        }
    }

Answer 1

你看过this documentation 吗？你可以看到一个工作示例来使用MarkerClusterer

//Create your map
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

//Create the clusterer and its options
var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [...]; // Create the markers you want to add and collect them into a array.
//Add the clusterer to the map, and the markers to the clusterer.
var mc = new MarkerClusterer(map, markers, mcOptions);

请注意，如果您没有很多标记，则必须更改一些选项才能看到集群器工作。更改集群器工作的maxZoom，以及网格的大小（gridSize 选项）。
有关所有选项的完整列表，请参阅this document

Answer 2

看这个：

http://www.appelsiini.net/2008/introduction-to-marker-clustering-with-google-maps

您可以制作集群，基于矩形或基于正方形。