Google 地图 API 集群标记问题

Question

我在创建聚类标记时遇到问题。截至目前，我只能看到标记本身。我尝试在 for 循环之前创建标记聚类器，但这并不能解决问题。

function codeAddress() {
          var markers = [];
          var address = ['Reston, VA']
          address.push('Herndon, VA');
          address.push('San Francisco, CA')
          address.push('San Jose, CA')
          for(i = 0; i < address.length; i++){
            geocoder.geocode( { 'address': address[i]}, function(results, status) {
            if (status == 'OK') {
              var marker = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location,
                  icon: image
              });
            } else{
              alert('Geocoding did not work' + status);
            }
            markers.push(marker);
          });
        }
        const imagePath = "m1.png";
        const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath},{
          maxZoom: 5
        });
        markerClusterer.addMarker(marker);
      }

Resulting Google Maps from Code Above

Answer 1

地理编码器是异步的。当您将其添加到 markerClusterer 时，标记数组为空。

在循环之前创建 MarkerClusterer，然后将 markerClusterer.addMarker(marker); 移动到地理编码器回调例程中。

function codeAddress() {
  var markers = [];
  var address = ['Reston, VA']
  address.push('Herndon, VA');
  address.push('San Francisco, CA')
  address.push('San Jose, CA')
  const markerClusterer = new MarkerClusterer(map, [], {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    maxZoom: 5
  });
  for (i = 0; i < address.length; i++) {
    geocoder.geocode({
      'address': address[i]
    }, function(results, status) {
      if (status == 'OK') {
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        markers.push(marker);
        markerClusterer.addMarker(marker);
      } else {
        alert('Geocoding did not work' + status);
      }
    });
  }
}

proof of concept fiddle

代码片段：

var map;
var geocoder;

function initMap() {

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

function codeAddress() {
  var markers = [];
  var address = ['Reston, VA']
  address.push('Herndon, VA');
  address.push('San Francisco, CA')
  address.push('San Jose, CA')
  const markerClusterer = new MarkerClusterer(map, [], {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    maxZoom: 5
  });
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < address.length; i++) {
    geocoder.geocode({
      'address': address[i]
    }, function(results, status) {
      if (status == 'OK') {
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        markers.push(marker);
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
        markerClusterer.addMarker(marker);
      } else {
        alert('Geocoding did not work' + status);
      }
    });
  }
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Google 地图 API 集群标记问题

Google Maps API Clusterer Marker Issue

google-maps-api-3