从 markerclusterer 获取标记信息

Question

我已将标记推入 markerClusterer。当我点击 markerClusterer 时，我想显示集群中 nmarkers 的信息。但是，当我使用 getMarkers() 方法时，它不会给我存储在标记中的信息，只提供有关标记本身的数据。有什么办法可以实现吗？ https://codesandbox.io/s/joey-gmaps-c5kdf

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

    });

Answer 1

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

尝试以下 jsfiddle based off of Google's 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(),
      myObj: { myKey: i }
    });
  });

  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 (let i in m) {
      console.log(m[i].getLabel());
      console.log(m[i].getTitle());
      console.log(m[i].myObj.myKey);
    }
  });
}

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

编辑： 此错误似乎与打字稿相关。相关线程 custom property with google marker in type script

中有解决方案

请尝试以下代码：

for (var i = 0; i < features.length; i++) {
  const marker2 = new google.maps.Marker({
    position: features[i].position,
    icon: icons[features[i].type].icon,
    animation: google.maps.Animation.DROP,
    map: map
  });
  marker2.set("customInfo", features[i].location);
  console.log("Marker222223", marker2["customInfo"]);
  markerCluster.addMarker(marker2);
}

希望对您有所帮助！

Answer 2

在创建标记时将对象添加到标记中，以便每个标记都有关联的对象，即 customInfo

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

希望对您有所帮助

引用https://medium.com/@sunil.jadhav38/implementing-marker-clustering-is-angular-using-google-charts-6b62a33f3b61

从 markerclusterer 获取标记信息

Getting marker info from markerclusterer

javascript

google-maps

google-maps-api-3

markerclusterer

angular