Question

我无法让Google Maps MarkerClusterer工作。我确信我正确地遵循了程序（即创建地图，向数组添加标记，不将标记设置为地图，然后将地图和标记附加到MarkerClusterer），这让我相信也许它必须与谷歌地图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);
    });

});

Answer 1

您需要在回调函数（创建markers数组的位置）中初始化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

通过JSON创建的标记不与Google Maps MarkerClusterer集群

1 个答案: