Javascript GoogleMapsJSAPI-如何使用fitBounds来响应地图？

我试图在一个有响应的网站上显示地图上的某个区域。 我希望它在加载时通过放大和缩小显示相同的区域，无论窗口大小如何。 经过一些研究，我明白了我需要使用GoogleMapsJSAPI的fitBounds函数，但无法让它工作。以下是我目前的代码：

<div id="map"></div><!--css rules to make it a 16/9 responsive box-->
<script src="https://maps.googleapis.com/maps/api/js?key=mykey" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(x, y), //any coordinates I put here don't matter, as I need the map to adjust using bounds, right?
        zoom: 11
    };
    var bounds = google.maps.LatLngBounds(
        new google.maps.LatLng(x, y), //SW coordinates here
        new google.maps.LatLng(x, y) //NE coordinates here
    );
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
    var bounds = map.getBounds();
    google.maps.event.trigger(map, "resize");
    map.fitBounds(bounds);
});
</script>

函数初始化（）{
变量映射选项={
中间：新的google.maps.LatLng（x，y），//我放在这里的任何坐标都不重要，因为我需要地图使用边界进行调整，对吗？
缩放：11
};
var bounds=google.maps.LatLngBounds(
新的google.maps.LatLng（x，y），//此处为西南坐标
新的google.maps.LatLng（x，y）//NE坐标在这里
);
var map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
映射边界（bounds）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
var bounds=map.getBounds（）；
google.maps.event.trigger（map，“resize”）；
映射边界（bounds）；
});

---

地图似乎只是显示了选项中的中心位置，而忽略了fitBounds调用。我遗漏了什么/做错了什么？

在地图有机会调整大小之前，您当前正在检索地图的边界

您需要为map resize事件添加一个额外的处理程序，然后将fitBounds代码移动到该事件中。仍然在窗口调整大小处理程序中保留贴图调整大小的触发器

编辑

---

您需要将map变量移到initialize函数之外，以便map监听器可以全局访问它。

下面是实现它的方法（使用jQuery窗口调整大小事件）：

---

对不起，我不明白。您的意思是从Innizalize（）中取出fitBound函数，将其放入新函数中，然后从新的侦听器调用它吗？我试过了，但还是没有。。。除了resize event函数外，fitBounds在加载时似乎什么都不做。好吧，我发现了一个愚蠢的错误：在

var bounds=google.maps.LatLngBounds

行中，我忘记了

new

！很抱歉啊，是的，我错过了，也看到了我最近的编辑，你们也需要这样做，这样你们就可以访问你们函数中其他地方的地图

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(x, y),
    zoom: 11
  };
  var bounds = google.maps.LatLngBounds(
    new google.maps.LatLng(x, y), //SW coordinates here
    new google.maps.LatLng(x, y) //NE coordinates here
  );
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  map.fitBounds(bounds);

  // Listen for events after map initialization
  $(window).resize(function() {
    google.maps.event.trigger(map, 'resize');
  });

  google.maps.event.addListener(map, 'resize', function() {
    var bounds = map.getBounds();
    map.fitBounds(bounds);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);