无法使fitBounds工作

Question

我不知道应该在哪里包含fit边界，不管我把它放在哪里，地图的中心位置都是initMap指定的世界的一半，而不是标记的位置。

调用只是一个对象数组，它存储一组lat/lngs

function initMap()
{
    map = new google.maps.Map(document.getElementById('map'),
    {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 12,
        scaleControl: true
    }); 
}

// Place Markers on Map
function initMarkers()
{
    for (var i = 0; i < Calls.length; i++)
    {
        var marker = new google.maps.Marker({
            position: Calls[i],
            map: map
        });
    }
}

function fit()
{
    var bound = new google.maps.LatLngBounds();
    for (var i in Calls)
    {
        bound.extend(Calls[i].getPosition());
    }
    map.fitBounds(bound);
}

// Initialize GoogleMap on Page Load
window.onload = function()
{
    initMap();
    initMarkers();
    fit();
}

Answer 1

发布的代码生成一个javascript错误(不是问题中最初报告的错误，但已经删除了)：Uncaught TypeError: Calls[i].getPosition is not a function。Calls是一个对象数组，所以它不会有一个.getPosition方法。

function fit()
{
    var bound = new google.maps.LatLngBounds();
    for (var i in Calls)
    {
        bound.extend(new google.maps.LatLng(Calls[i].lat,Calls[i].lng));
    }
    map.fitBounds(bound);
}

代码片段：

​

var Calls = [{
  lat: 42,
  lng: -72
}, {
  lat: 40.7127837,
  lng: -74.0059413
}, {
  lat: 40.735657,
  lng: -74.1723667
}];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 12,
    scaleControl: true
  });
}

// Place Markers on Map
function initMarkers() {
  for (var i = 0; i < Calls.length; i++) {
    var marker = new google.maps.Marker({
      position: Calls[i],
      map: map
    });
  }
}

function fit() {
  var bound = new google.maps.LatLngBounds();
  for (var i in Calls) {
    bound.extend(new google.maps.LatLng(Calls[i].lat, Calls[i].lng));
  }
  map.fitBounds(bound);
}

// Initialize GoogleMap on Page Load
window.onload = function() {
  initMap();
  initMarkers();
  fit();
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

​