Google 地图 Clustermap 的自动缩放和自动居中

Question

添加自动缩放和自动居中谷歌集群地图的最佳方法是什么？ 目前，中心和缩放是硬编码的，与动态生成的标记有冲突。

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

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

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }
  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: -43.999792, lng: 170.463352}
  ]
</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=YOUR_API_KEY&callback=initMap">
</script>

Answer 1

将标记位置添加到google.maps.LatLngBounds对象，然后使用结果边界调用map.fitBounds() 。

var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
  bounds.extend(location);
  map.fitBounds(bounds);
  //  ...

概念证明小提琴

代码片段：

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: { lat: -28.024, lng: 140.887 } }); var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var bounds = new google.maps.LatLngBounds(); var markers = locations.map(function(location, i) { bounds.extend(location); map.fitBounds(bounds); return new google.maps.Marker({ position: location, label: labels[i % labels.length] }); }); // Add a marker clusterer to manage the markers. var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); } 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: -43.999792, lng: 170.463352 }] google.maps.event.addDomListener(window, "load", initMap);

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

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <div id="map"></div>