标记集群如何添加jquery

时间:2016-07-01 11:21:18

标签: jquery google-maps markerclusterer

我继承了一个使用

的插件

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。

1 个答案:

答案 0 :(得分:0)

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

gmap3

要检索lat long坐标数组,我需要对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
          };
        }
      }
  })
;