通过 JSON 创建的标记不与 Google Maps MarkerClusterer 进行聚类答案

【问题标题】：Markers Created via JSON Are Not Clustering with Google Maps MarkerClusterer通过 JSON 创建的标记不与 Google Maps MarkerClusterer 进行聚类
【发布时间】：2015-02-16 14:15:00
【问题描述】：

我无法让 Google Maps MarkerClusterer 正常工作。我相当确定我正确地遵循了程序（即创建地图，将标记添加到数组，不将标记设置到地图，然后将地图和标记附加到 MarkerClusterer），这让我相信它可能有使用 Google Maps v3 与 v2 做某事。我只是从 json 文件创建标记，而不是根据用户输入过滤标记。

快速说明：当我将地图添加到标记时，所有标记都会显示出来，但它们只是没有聚集在一起。

$('document').ready(function() {

    $('#map').height($(window).height() - $('#map').position().top - 20);

    var mapElem = document.getElementById('map');

    var center = {
        lat: 47.6,
        lng: -122.3
    }

    var map = new google.maps.Map(mapElem, {
        center: center,
        zoom: 12
    });

    var infoWindow = new google.maps.InfoWindow();
    var cameras;
    var markers = [];

    $.getJSON('http://data.seattle.gov/resource/65fc-btcc.json')
        .done(function(data) {
            cameras = data;
            cameras.forEach(function(cameras) {
                var marker = new google.maps.Marker({
                    position: {
                        lat: parseFloat(cameras.location.latitude),
                        lng: parseFloat(cameras.location.longitude)
                    }
                });

                google.maps.event.addListener(marker, 'click', function() {
                    map.panTo(this.getPosition());
                    var html = '<p>' + cameras.cameralabel + '</p>';
                    html += '<img src="' + cameras.imageurl.url + '"/>';
                    infoWindow.setContent(html);
                    infoWindow.open(map, this);
                });

                google.maps.event.addListener(map, 'click', function() {
                    infoWindow.close();
                });

                markers.push(marker);

                $('#search').bind('search keyup', function() {
                    var cameraName = cameras.cameralabel.toLowerCase();
                    var searchString = this.value.toLowerCase();
                    if (cameraName.indexOf(searchString) < 0) {
                        marker.setMap(null);
                    } else {
                        marker.setMap(map);
                    }
                });
            });
        })
        .fail(function(err) {
            console.log(err);
            alert('Sorry, unfortunately something went wrong!');
        });

    var markerCluster = new MarkerClusterer(map, markers);

    $(window).resize(function() {
        $('#map').height($(window).height() - $('#map').position().top - 20);
    });

});

【问题讨论】：

标签： javascript google-maps google-maps-api-3 markerclusterer

【解决方案1】：

您需要在回调函数（创建标记数组的位置）内初始化 MarkerClusterer。

$('document').ready(function() {

    $('#map').height($(window).height() - $('#map').position().top - 20);

    var mapElem = document.getElementById('map');

    var center = {
        lat: 47.6,
        lng: -122.3
    }

    var map = new google.maps.Map(mapElem, {
        center: center,
        zoom: 12
    });

    var infoWindow = new google.maps.InfoWindow();
    var cameras;
    var markers = [];

    $.getJSON('http://data.seattle.gov/resource/65fc-btcc.json')
        .done(function(data) {
            cameras = data;
            cameras.forEach(function(cameras) {
                var marker = new google.maps.Marker({
                    position: {
                        lat: parseFloat(cameras.location.latitude),
                        lng: parseFloat(cameras.location.longitude)
                    }
                });

                google.maps.event.addListener(marker, 'click', function() {
                    map.panTo(this.getPosition());
                    var html = '<p>' + cameras.cameralabel + '</p>';
                    html += '<img src="' + cameras.imageurl.url + '"/>';
                    infoWindow.setContent(html);
                    infoWindow.open(map, this);
                });

                google.maps.event.addListener(map, 'click', function() {
                    infoWindow.close();
                });

                markers.push(marker);

                $('#search').bind('search keyup', function() {
                    var cameraName = cameras.cameralabel.toLowerCase();
                    var searchString = this.value.toLowerCase();
                    if (cameraName.indexOf(searchString) < 0) {
                        marker.setMap(null);
                    } else {
                        marker.setMap(map);
                    }
                });
            });
            // here, inside the .done function
            var markerCluster = new MarkerClusterer(map, markers);
        })
        .fail(function(err) {
            console.log(err);
            alert('Sorry, unfortunately something went wrong!');
        });

    $(window).resize(function() {
        $('#map').height($(window).height() - $('#map').position().top - 20);
    });

});

working fiddle

【讨论】：