Clustering markers with google maps version 3

问题

I have about 2400 markers that are being displayed on google maps version 3. The problem is that there are too many markers on the map and that is not a good visual representation. What is want to do is group that the markers (i.e. cluster them). I'm experiencing some issues regarding that. Below is my sample code.

function initialize() {
        var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            //marker:true
        };

        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        //Get marker image
        var redMarker = 'Images/marker2.png';
        var greenMarker = 'Images/g48.png';
        var currentMarker;

        var gmarkers = [];

        for (i = 0; i < markers.length; i++) {
            var data = markers[i];
            var mag = data.Magnitude;
            if (mag < 5) {
                currentMarker = greenMarker;
            }
            else if (mag >= 5) {
                currentMarker = redMarker;
            };
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                icon: currentMarker
            });
            (function (marker, data) {
                //Attaching a click event to the current marker
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent('Magnitude: ' + data.Magnitude + '<br />'
                                         + 'Location: ' + data.title);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            gmarkers.push(marker);
        }
    }

    var markerCluster = new MarkerClusterer(map, gmarkers);

    window.onload = function () { initialize();
}

回答1:

I get a javascript error in your code as posted

Uncaught ReferenceError: map is not defined

on this line:

var markerCluster = new MarkerClusterer(map, gmarkers);

The map variable is local to the initialize function. That line is outside of the initialize function, so the map variable isn't available to it.

Put it inside the initialize function (but after the markers have been parsed).

来源：https://stackoverflow.com/questions/30262976/clustering-markers-with-google-maps-version-3

标签

google-maps-api-3

markerclusterer