无法使用fitBounds工作

时间:2015-11-25 02:01:37

标签: google-maps google-maps-api-3

我不知道在哪里包含拟合界限,无论我把它放在哪里,地图都集中在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();
}

1 个答案:

答案 0 :(得分:1)

发布的代码会生成javascript错误(不是最初在问题中报告的错误,但已被删除):Uncaught TypeError: Calls[i].getPosition is not a functionCalls是一个对象数组,因此它没有.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>