Question

我的手上有一点谜题。我正在使用Google Maps v3和MarkerClusterer v3。当我加载页面时，地图会出现，所有点都存在，但没有任何内容聚集在一起。

如果我去firebug控制台做：

markerCluster = new MarkerClusterer(map, markers);

突然聚类工作。

奇怪的是，如果我在地图实例化和markerclusterer实例化之间发出警报，那么群集突然再次起作用。这是我的$（文档）.ready函数的结束：

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    markerCluster = new MarkerClusterer(map, markers);

以及使群集工作所需的全部工作是：

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    alert("test");
    markerCluster = new MarkerClusterer(map, markers);

我在这里缺少什么？我需要以某种方式刷新地图吗？这是警报框发生的事情吗？

如果您需要更多代码，请发表评论。

Answer 1

您的问题来自$.ajax()，$.getJSON()是异步方法的事实。执行后，您的代码不会被阻止（否则浏览器也会被阻止）。因此，在AJAX响应处理结束之前调用var markerCluster = new MarkerClusterer(map, markers);。要解决此问题，您必须使用回调，例如complete()，这将在处理完成后触发。

例如：

$.getJSON('/your_data.json', function(data) {
  for (var i=0;i<data.length;i++){
    // code to display markers
  }
}).complete(function() { 
  var marker_cluster = new MarkerClusterer(map, gmarkers);
});

希望这有帮助。

Answer 2

这是我最终使用的一个轻微编辑的版本。我在这里给出了大部分脚本，这样人们就可以了解每个函数正在发生的上下文以及所有内容的范围。希望这会让人有些头疼。

var initialize = function(){

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

    function load_content(marker, id){
        $.ajax({
            url: 'eventos/' + id,
            success: function(data){
                infowindow.setContent(data);
                infowindow.open(map, marker);
            }
        });
    }

    var opt = { ...options...}

    var map = new google.maps.Map(document.getElementById('map_canvas'), opt);

    map.setCenter(new google.maps.LatLng(-44.4419, 170.1419));
    map.setZoom(9);

    $.ajax({
        url: 'eventos/',
        method: 'GET',
        dataType: 'json',
        success: function(data){

            $.each(data, function(i, a){

                var latlng = new google.maps.LatLng(a.evento.lat, a.evento.lng);

                var marker = new google.maps.Marker({
                    position : latlng,
                    title: a.evento.title
                });

                google.maps.event.addListener(marker, 'closeclick', function() {
                    infowindow.setContent("");
                });

                google.maps.event.addListener(marker, 'click', function() {

                    infowindow.close();

                    infowindow.setContent("<img src='loading.gif'>");

                    load_content(marker, a.evento.id);
                });

                markers.push(marker);
            });

            var markerCluster = new MarkerClusterer(map, markers);

        }

    });

};

Answer 3

我有完全相同的问题和症状。我的解决方案最终是用谷歌加载器加载地图，这出于某种原因工作正常。

这不适用于mapclusterer：

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
...
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

虽然这有效：

<script src="http://www.google.com/jsapi"></script>
...
google.load('maps', '3', { other_params: 'sensor=false' });
google.setOnLoadCallback(initialize);

function initalize() {
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

这种解决方法对每个人来说都是不可能的，但希望有人可以从中受益。

Answer 4

你看过这个thread on MarkerClusterer v3吗？它有一些方便资源的链接，即代码示例和参考文档。

检查示例并确保它们在您的测试浏览器中正常工作（您永远不会知道，可能是MC的问题）。

谷歌地图v3：Markerclusterer没被解雇？

4 个答案: