javascript - 将标记添加到将进入标记集群的 Google map

Question

我添加了 4 个位置，当页面加载并缩小时，这些位置将聚集成 4 个一组。

我添加了一个单击事件来向 map 添加标记。我无法让这些添加的标记成为标记簇，就像我放入脚本中的 4 个位置一样。

我该怎么做？

<div id="mapContainer">
  <div id="map"></div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbdYz0sVFHyKAMVP051D_UI1PsbxQ92n8&callback=initMap"></script>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {lat: 33.034405, lng: -117.292928}
    });
    // Create an array of alphabetical characters used to label the markers.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length]
      });
    });

    function addMarker(location) {
      var marker = new google.maps.Marker({
        position: location,
        map: map
      });
      marker.push({event: latLng});
    }
    //Add Marker click function
    map.addListener('click', function(event) {
      addMarker(event.latLng);
      console.log(locations);
    });
    // Add a marker cluster to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
  }
  var locations = [
    {lat: 33.034405, lng: -117.292300},
    {lat: 33.020933, lng: -117.285465},
    {lat: 33.047011, lng: -117.298916},
    {lat: 33.045600, lng: -117.298309},
  ];
</script>

Answer 1

修改您的事件监听器以将新创建​​的标记添加到标记集群中:

function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  marker.push({event: latLng});
  //add this:
  markerCluster.addMarker(marker);
}

proof of concept fiddle

代码片段:

html,
body,
#mapContainer,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="mapContainer">
  <div id="map"></div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 33.034405,
        lng: -117.292928
      }
    });
    // Create an array of alphabetical characters used to label the markers.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length]
      });
    });

    function addMarker(location) {
      var marker = new google.maps.Marker({
        position: location,
        map: map
      });
      markerCluster.addMarker(marker);
    }
    //Add Marker click function
    map.addListener('click', function(event) {
      addMarker(event.latLng);
      console.log(locations);
    });
    // Add a marker cluster to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
  }
  var locations = [{
      lat: 33.034405,
      lng: -117.292300
    },
    {
      lat: 33.020933,
      lng: -117.285465
    },
    {
      lat: 33.047011,
      lng: -117.298916
    },
    {
      lat: 33.045600,
      lng: -117.298309
    },
  ];
</script>