标记集群如何添加jquery

Question

我继承了一个使用的插件

https://github.com/marioestrada/jQuery-gMap

它产生标记的方式是这样的：

var results = [];
    if( locationSet && !jQuery( "li.FYN_viewmap" ).first().hasClass('no-results-found') ){

    jQuery( "li.FYN_viewmap" ).each(function( index ) {

    var distance = parseInt(jQuery(this).attr('data-distance')),
    html = '<a href="'+jQuery(this).attr('data-link') + '"><strong>'+jQuery(this).attr('data-title') + '</strong><br /><span style="font-size:0.9em;">' + jQuery(this).attr('data-address') + '</span></a>';        

                                results.push({latitude: jQuery(this).attr('data-lat'), longitude: jQuery(this).attr('data-lng'), html: html});
jQuery('#FYN_map').gMap({
        zoom: zoom,
        markers: results,
        controls:  controls,
        icon: icon,
        });

我不知道如何将 google maps clusterer 添加到此。有什么想法吗？

我查过的所有信息都有这个例子：

var markers = [];
  for (var i = 0; i < 100; ++i) {
    var latlng = new GLatLng(data.photos[i].latitude, data.photos[i].longitude);
    var marker = new GMarker(latlng);
    markers.push(marker);
  }
var markerCluster = new MarkerClusterer(map, markers);

我看不出这与我在这个插件中的代码有什么关系，记住它已经在 var 结果中设置了 latlng。

Answer 1

我不知道这是否会帮助任何人，但我找到了解决方案。我现在正在使用另一个启用了集群功能的 googlemaps 插件。

gmap3

要检索经纬度坐标数组，我需要对 var 结果进行此更改。 results.push({position: [ jQuery(this).attr('data-lat'), jQuery(this).attr('data-lng') ] });

然后这会显示我的地图：

$('#FYN_map').gmap3({
    center: [56.110182, -4.000124],
    zoom: zoom
  })
  .cluster({
     size: 200,
     markers: results,
      cb: function (markers) {
        if (markers.length > 1) { // 1 marker stay unchanged (because cb returns nothing)
          if (markers.length < 20) {
            return {
              content: "<div class='cluster cluster-1'>" + markers.length + "</div>",
              x: -26,
              y: -26
            };
          }
          if (markers.length < 50) {
            return {
              content: "<div class='cluster cluster-2'>" + markers.length + "</div>",
              x: -26,
              y: -26
            };
          }
          return {
            content: "<div class='cluster cluster-3'>" + markers.length + "</div>",
            x: -33,
            y: -33
          };
        }
      }
  })
;