Question

我一直在其他网站上使用类似的代码，但出于某种原因，事情的集群方面不希望这次工作。示例代码（修剪以删除与之无关的代码）;

$.getJSON("./cgi-bin/links/ajax_mobi.cgi",{
    action: 'load_results_map', 
    swlat: swlat, swlng: swlng, nelat: nelat, nelng: nelng, 
    faves: localStorage.getItem('faves'),
}, function(data) {

    $.each( data.markers, function(i, marker) {

        if (marker.is_error == "1") {
            bootbox.alert("Sorry, no results matched");
        } else { 
            jQuery('#map-inner').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': false,
                'icon': './img/marker.png',
                'id' : marker.linkid
            });
        }

    }); 

    $('#map-inner').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map-inner').gmap('get', 'map'), $('#map-inner').gmap('get', 'markers')));

});

工作正常，并显示我所有标记上的地图（只是没有聚集）。

然而，当它到达这部分代码时：

$('#map-inner').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map-inner').gmap('get', 'map'), $('#map-inner').gmap('get', 'markers')));

这给了我一个错误：

TypeError: marker is undefined
http://www.site.com/mob_app/js/ui/markerclusterer.js
Line 1222

...当然，根本不添加聚类（只保留现有标记）

我已经检查过，并仔细检查过代码是否正确，但似乎无法让它正常工作。

有人能看到嘘声吗？我正在使用jQuery 2.0.3和Bootstrap 3.0.2（我已经尝试过对此进行评论，但它没有任何区别）。我还使用jquery-ui-map 3.0-rc（最新）和MarkerClustererPlus 2.0.16

Answer 1

好的 - 这真的不太理想，但我发现另一个群集插件似乎工作正常：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

我必须对我的代码进行一些调整（因为你需要将push标记放入一个数组中，而不是正常添加它们 - 然后做一个衬里使其成为簇。）< / p>

基本上你只需要制作一个新阵列：

var markers = [];

然后将它们“推”到数组中：

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(marker.latitude, marker.longitude)
});
markers.push(marker);

...最后（一旦添加了所有标记），您需要将它们处理到地图中：

var markerCluster = new MarkerClusterer(the_map, markers);

不理想（我宁愿保留旧插件，但即使在非常简单的测试页面上，它也只是拒绝工作）

Answer 2

好的 - 所以我尝试了另一个群集插件，但真的不喜欢它（不够灵活）。

我回到绘图板，决定再看一下这个问题。我最终设法找到了解决方案（一切都很奇怪）

实际的bug与我传入的“id”参数有关。出于某种原因，标记聚类器代码正在执行：

MarkerClusterer.prototype.addMarkers = function (markers, opt_nodraw) {
  var i;
  for (i = 0; i < markers.length; i++) {
      this.pushMarkerTo_(markers[i]);
  }
  if (!opt_nodraw) {
    this.redraw_();
  }
};

要解决这个问题，我只是添加了一个基本的if ()语句，以确保确实存在标记

MarkerClusterer.prototype.addMarkers = function (markers, opt_nodraw) {
    var i;
    for (i = 0; i < markers.length; i++) {
      if (markers[i] != undefined) {
        this.pushMarkerTo_(markers[i]);
      }
    }
    if (!opt_nodraw) {
      this.redraw_();
    }
};

如果您没有将其作为ID数组传递，那就没关系。当您为每个标记分配ID时，它会更改其保存的格式。“修复”是使用标记的title属性 - 所以：

jQuery('#map_inner').gmap('addMarker', { 
    'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
    //'bounds': false,
    'icon': './img/marker.png',
    'title' : marker.linkid 
}).click(function() {
    // do stuff
});

然后，如果您需要获取标记的ID，请使用attr()，如下所示：

$(this).attr('title')

它当然不理想，但似乎有效。使用自定义ID存储标记显然存在固有问题。

希望这至少可以拯救我所有头痛的人！

jerery-ui-map与MarkerClusterer有关

2 个答案: