从markerclusterer获取标记信息

问题描述 投票:1回答:2

我已将标记推入markerClusterer。当我单击markerClusterer时,我想显示集群中nmarker的信息。但是,当我使用getMarkers()方法时,它不会提供存储在标记中的信息,而只会提供有关标记本身的数据。有什么办法可以实现呢?

    const markerCluster = new MarkerClusterer(map, [],
      { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });

    google.maps.event.addListener(markerCluster, 'clusterclick', function (c) {
      console.log('Number of managed markers in cluster: ' + c.getSize());
      var m = c.getMarkers();
      for (i in m) {
        console.log(Object.values(m[i]));
        console.log(m[i].getTitle());
        console.log(m[i].toString());
      }
      var p = [];
      for (var i = 0; i < m.length; i++) {
        p.push(m[i]);
      }

    });
javascript angular google-maps google-maps-api-3 markerclusterer
2个回答
0
投票

您可以使用getMarkers获取标记的信息,因此您的代码实现中可能存在尚未发布的问题。

根据Google的jsfiddle,尝试以下example

下面的JS代码:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });

  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length],
      title: location.lat.toString() + "," + location.lng.toString()
    });
  });

  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  google.maps.event.addListener(markerCluster, 'clusterclick', function(c) {
    console.log('Number of managed markers in cluster: ' + c.getSize());
    var m = c.getMarkers();
    for (i in m) {
      console.log(m[i].getLabel());
      console.log(m[i].getTitle());
    }
  });
}

var locations = [{
    lat: -31.563910,
    lng: 147.154312
  },
  {
    lat: -33.718234,
    lng: 150.363181
  },
  {
    lat: -33.727111,
    lng: 150.371124
  },
  {
    lat: -33.848588,
    lng: 151.209834
  },
  {
    lat: -33.851702,
    lng: 151.216968
  },
  {
    lat: -34.671264,
    lng: 150.863657
  },
  {
    lat: -35.304724,
    lng: 148.662905
  },
  {
    lat: -36.817685,
    lng: 175.699196
  },
  {
    lat: -36.828611,
    lng: 175.790222
  },
  {
    lat: -37.750000,
    lng: 145.116667
  },
  {
    lat: -37.759859,
    lng: 145.128708
  },
  {
    lat: -37.765015,
    lng: 145.133858
  },
  {
    lat: -37.770104,
    lng: 145.143299
  },
  {
    lat: -37.773700,
    lng: 145.145187
  },
  {
    lat: -37.774785,
    lng: 145.137978
  },
  {
    lat: -37.819616,
    lng: 144.968119
  },
  {
    lat: -38.330766,
    lng: 144.695692
  },
  {
    lat: -39.927193,
    lng: 175.053218
  },
  {
    lat: -41.330162,
    lng: 174.865694
  },
  {
    lat: -42.734358,
    lng: 147.439506
  },
  {
    lat: -42.734358,
    lng: 147.501315
  },
  {
    lat: -42.735258,
    lng: 147.438000
  },
  {
    lat: -43.999792,
    lng: 170.463352
  }
]

例如单击蓝色群集#3,您将在控制台中记录以下输出:

Number of managed markers in cluster: 3
T
-42.734358,147.439506
U
-42.734358,147.501315
V
-42.735258,147.438

希望这会有所帮助!


0
投票

创建标记时将对象添加到标记中

 var marker = new google.maps.Marker({
        position: accident_LatLng,
        title: accident_title,
        map: map,
        customInfo: object,


      });

要访问标记对象,请使用以下代码。我创建了自定义数组来存储标记对象。

 var markers = cluster.getMarkers();
          var markerCustom = [];
          for (var i = 0; i < markers.length; i++) {
            markerCustom.push(cluster.markers_[i].customInfo)
          }

希望此帮助

© www.soinside.com 2019 - 2024. All rights reserved.