MarkerClusterer 的 jquery-ui-map 问题答案

【问题标题】：jquery-ui-map issues with MarkerClustererMarkerClusterer 的 jquery-ui-map 问题
【发布时间】：2013-12-10 12:43:24
【问题描述】：

我一直在另一个站点上使用类似的代码，但由于某种原因，这一次的集群方面不想工作。示例代码（精简以删除不相关的代码）；

$.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

【问题讨论】：

为我工作，你能提供一个演示或至少提供 JSON 吗？
JSON 没问题（它可以很好地添加标记）。问题似乎是某种与某事的冲突，但我一生都无法弄清楚它在做什么。我已将其简化为最基本的内容（仅与地图相关的内容，现在它只有一个硬编码的纬度/经度值，而不是 JSON）-view here。我认为如果我们可以让 infowindow 的东西正常工作，那么希望这也将有助于修复集群。谢谢！
一个不会冻结任何浏览器的演示会更有帮助。
啊抱歉，忘了说 - 您必须“取消”出现的 3 个弹出窗口。它是一个Phonegap 的东西（正确的PITA！）。取消它们应该让它加载得很好（我花了一段时间才解决这个问题）
cordova_plugins.json 文件？那不是数据的来源（这只是Phonegap 的一部分，Chrome Ripple 抱怨如果你不包含它。实际数据来自硬编码位（common.js 中的第 41-61 行）

标签： google-maps-api-3 markerclusterer

【解决方案1】：

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

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

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

基本上你只是创建一个新数组：

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);

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

【讨论】：

【解决方案2】：

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

我回到绘图板上，决定再看看这个问题。我终于设法找到了解决方案（虽然很奇怪）

实际的错误与我传入的“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 存储标记显然存在固有问题。

希望这至少能让我免于头痛！

【讨论】：