Question

我在地图上有2个标记。我想在发生某些事件时使这两个标记在地图上可见。但是，当我在地图restriction上添加fitBounds选项时，不会显示标记。当我删除restriction选项时，它似乎可以正常工作。这是示例代码：

var map, markers;

var locations = [{
    lat: 50.8503396,
    lng: 4.351710300000036
  },
  {
    lat: 49.9570366,
    lng: 36.3431478
  },
];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: {
      lat: -28.024,
      lng: 140.887
    },
    restriction: {
      strictBounds: true,
      latLngBounds: {
        north: 85,
        south: -85,
        west: -180,
        east: 180
      },
    },
  });

  markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location
    });
  });

  markers.forEach(function(marker) {
    marker.setMap(map);
  });
}


setTimeout(function() {
  var bounds = new google.maps.LatLngBounds();
  markers.forEach(function(marker) {
    bounds.extend(marker.position);
  });
  map.fitBounds(bounds);
}, 5000);

#map {
  height: 400px;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

https://jsfiddle.net/fedman/6eoty0vm/

Answer 1

虽然google.maps.api的此错误仍然存在，但您可以将地图中心设置为边界中心作为解决方法。

map.fitBounds(bounds);
map.setCenter(bounds.getCenter());

Answer 2

这看起来像个错误。可以在API 3.34版中正常工作，如下面的代码所示。似乎也可以根据地图容器的高度工作（尝试使用200px的高度，即使在最新版本中也可以）。

我打开了bug in the issue tracker。

var map, markers;

var locations = [{
    lat: 50.8503396,
    lng: 4.351710300000036
  },
  {
    lat: 49.9570366,
    lng: 36.3431478
  },
];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: {
      lat: -28.024,
      lng: 140.887
    },
    restriction: {
      strictBounds: true,
      latLngBounds: {
        north: 85,
        south: -85,
        west: -180,
        east: 180
      },
    },
  });

  markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location
    });
  });

  markers.forEach(function(marker) {
    marker.setMap(map);
  });
}


setTimeout(function() {
  var bounds = new google.maps.LatLngBounds();
  markers.forEach(function(marker) {
    bounds.extend(marker.position);
  });
  map.fitBounds(bounds);
}, 5000);

#map {
  height: 400px;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.34&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

当地图设置了“限制”选项时，map.fitBounds工作异常

2 个答案: