Javascript 谷歌地图的自动缩放和自动中心Clustermap

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

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

---

将标记位置添加到对象，然后使用结果边界调用

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


代码片段：


函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{
lat:-28.024，
液化天然气：140.887
}
});
var标签='abcdefghijklmnopqrstuvxyz'；
var bounds=new google.maps.LatLngBounds（）；
var markers=locations.map（函数（位置，i）{
扩展（位置）；
映射边界（bounds）；
返回新的google.maps.Marker({
位置:位置,，
标签：标签[i%标签.长度]
});
});
//添加标记群集器以管理标记。
var markerCluster=新的MarkerClusterer（地图、标记、{
imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
变量位置=[{
lat:-31.563910，
液化天然气：147.154312
}, {
lat:-33.718234，
液化天然气：150.363181
}, {
lat:-33.727111，
液化天然气：150.371124
}, {
lat:-33.848588，
液化天然气：151.209834
}, {
lat:-33.851702，
液化天然气：151.216968
}, {
lat:-34.671264，
液化天然气：150.863657
}, {
lat:-35.304724，
液化天然气：148.662905
}, {
lat:-36.817685，
液化天然气：175.699196
}, {
lat:-36.828611，
液化天然气：175.790222
}, {
拉脱维亚：-37.750000，
液化天然气：145.116667
}, {
纬度：-37.759859，
液化天然气：145.128708
}, {
lat:-37.765015，
液化天然气：145.133858
}, {
lat:-43.999792，
液化天然气：170.463352
}]
google.maps.event.addDomListener（窗口“加载”，initMap）
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}