【问题标题】:goMap with MarkerClusterer does not take any effect on the current map带有 MarkerClusterer 的 goMap 对当前地图没有任何影响
【发布时间】:2011-11-27 02:06:52
【问题描述】:

我正在使用 jQuery Google Maps v3 plugin,我想用 goMap 插件添加 MarkerClusterer,但是我有这个打算做的事情:

$('#world-map').goMap(
{
    markers: mapMarkers,
    zoom: 2,
    icon: 'http://localhost/eproj/white-marker.png',
    streetViewControl: true,
});

$.goMap.ready(function()
{
    var markers = [];
    for (var i in $.goMap.markers)
    {
        var temp = $($.goMap.mapId).data($.goMap.markers[i]);
        markers.push(temp);
    }
    var markerclusterer = new MarkerClusterer($.goMap.map, markers, clustererOpts);
});

查看地图时(目前有 35 个标记),除了所有标记都被绘制出来外,我没有看到任何生效。在 Firebug 中,我没有看到任何错误被记录,所以我完全不知道为什么这不适用于 goMap。

有人吗?甚至没有一个简单的解决方案?

编辑:我不能把它放在 jsFiddle 上,似乎在将 JS 资源添加到 jsFiddle 时搞砸了。

这是mapMarkers 变量:

[{"id":"9073a1977c8d5d6d7eb1666d03af4a66","address":"3  Essex St,  Jersey City,  Hudson,  United States"},{"id":"f63f77a0b2d0986f1f0e94bde07ff8ef","address":"96  Vesey St,  New York,  New York,  United States"},{"id":"57d5cb180425670f3e9c7b6e62fb88ac","address":"38  E Broadway,  Manhattan,  New York,  United States"},{"id":"bb464b47ca54a23edc3dee4a5f4299ad","address":"322  Tait Ave,  Sanger,  California,  United States"},{"id":"980f9d1e9e466d988f4851117a268e25","address":"1495  Morton Ave,  Parsons,  Kansas,  United States"},{"id":"389888acd972d01783547837841d5294","address":"160  N Washington St,  Clinton,  Missouri,  United States"}]

标记彼此非常接近,在地图缩放为 1 时,即使没有标记聚类器生效。

【问题讨论】:

  • 是否有可能是一个工作示例/jsfiddle.net?
  • 你能给我看看 mapMarkers 变量的定义吗?
  • 你还有什么问题吗?

标签: jquery google-maps-api-3 markerclusterer


【解决方案1】:

[新编辑]

解决此问题的最简单方法是破解jquery.gomap-1.3.2.js 源代码,如下所示:

在 init 函数的 myOptions 变量上添加 markerCreated 属性

之前

var myOptions = {
  ....
  scrollwheel:          opts.scrollwheel,
  zoom:                 opts.zoom
};

之后

var myOptions = {
  ....
  scrollwheel:          opts.scrollwheel,
  zoom:                 opts.zoom,
  markerCreated:        opts.markerCreated //patched here
};

createMarker 函数的更改和添加方法:

之前

createMarker: function(marker) {
  ....
  options.position = marker.position ? marker.position : new   google.maps.LatLng(marker.latitude, marker.longitude);

  var cmarker = new google.maps.Marker(options);
  if (marker.html) {
  ....
},

之后

createMarker: function(marker) {
  ....
  options.position = marker.position ? marker.position : new   google.maps.LatLng(marker.latitude, marker.longitude);

  var goMap = this; //patched here
  var cmarker = new google.maps.Marker(options);
  if(goMap.opts.markerCreated) goMap.opts.markerCreated(cmarker); //patched here
  if (marker.html) {
  ....
},

然后在您自己的代码中更改为:

$('#world-map').goMap(
{
    markers: mapMarkers,
    zoom: 2,
    icon: 'http://localhost/eproj/white-marker.png',
    streetViewControl: true,
});

到:

$(function() {

    var markerclusterer;
    var markers = [];
    var mapMarkers = [{"id":"9073a1977c8d5d6d7eb1666d03af4a66","address":"3  Essex St,  Jersey City,  Hudson,  United States"},
        {"id":"f63f77a0b2d0986f1f0e94bde07ff8ef","address":"96  Vesey St,  New York,  New York,  United States"},
        {"id":"57d5cb180425670f3e9c7b6e62fb88ac","address":"38  E Broadway,  Manhattan,  New York,  United States"},
        {"id":"bb464b47ca54a23edc3dee4a5f4299ad","address":"322  Tait Ave,  Sanger,  California,  United States"},
        {"id":"980f9d1e9e466d988f4851117a268e25","address":"1495  Morton Ave,  Parsons,  Kansas,  United States"},
        {"id":"389888acd972d01783547837841d5294","address":"160  N Washington St,  Clinton,  Missouri,  United States"}
    ];
    $("#map").goMap({
        markerCreated: function(marker) {
            markers.push(marker);
            //updated solution for slow MarkerClusterer loading
            if(markers.length == mapMarkers.length) {
                new MarkerClusterer($.goMap.map, markers);
            }
            //prev solution
            //if(!markerclusterer) markerclusterer = new MarkerClusterer($.goMap.map, markers);
            //markerclusterer.addMarker(marker);
        },
        markers: mapMarkers
    });
});

删除$.goMap.ready 部分

如果这个 hack 有效/无效,请让我现在 谢谢

[编辑]

我认为这是因为在创建 MarkerCluster 时,它没有传递正确的标记对象参数。 这是因为您的 mapMarkers 变量需要在创建标记对象之前先进行地理编码,同时在您的代码中您强制在标记正确地理编码之前创建 MarkerCluster(返回具有位置属性的标记对象)

相信我,当您将 mapMarkers 变量替换为标记对象(我的意思是已知位置)时,您可以正确看到集群显示 试试这个:

[{ 
    latitude: 40.713094,
    longitude: -74.033904,
    id: 'test1',
    title: 'marker title 1'
},{
    latitude: 40.712638,
    longitude: -74.03429,
    id: 'test2',
    title: 'marker title 2'
}]

[旧] 也许这有帮助:

goMap Markercluster Soluton

抱歉,不能写出比这个更简单的解决方案;)

提示:尝试查看页面源代码

【讨论】:

  • 啊...所以它们都必须被地理编码成纬度/经度..?有没有一种解决方案可以使地址以某种方式对标记聚类器起作用?
  • 是的。这可以通过做一些hack来完成。请参阅我的更新答案以获取黑客提示。
  • 它应该是this.opts 而不是goMap.opts,但它似乎不起作用,没有任何内容登录到 Firebug。标记照常绘制,没有任何效果。
  • 我已经修正了我的答案。您可以通过enggon.com/so/markerclusterer.html 查看工作解决方案
  • 您的更新版本可以运行,但是它的绘图速度很慢,这仍然是合理的,但可以改进吗?
猜你喜欢
  • 2021-06-17
  • 1970-01-01
  • 2020-01-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-10
相关资源
最近更新 更多