如何使用 JavaScript 动态调整 Google 地图的大小？

使用 JavaScript 动态调整 Google 地图大小

动态调整 Google 地图元素大小时，触发调整大小事件以确保地图大小至关重要调整为新尺寸。

适用于 Google Maps v3

<code class="javascript">google.maps.event.trigger(map, "resize");</code>

适用于 Google Maps API

适用于 Google 地图API，您可以使用以下 JavaScript 代码来触发 resize 事件：

<code class="javascript">function resizeMap() {
  google.maps.event.trigger(map, "resize");
}</code>

然后您可以调用 resizeMap() 将地图调整为容器更新的尺寸。

补充说明：

• 调整大小事件必须在新尺寸设置后触发。
• 使用窗口调整大小监听器可以确保地图响应浏览器窗口大小。

示例：

<code class="html"><script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-container">
  <div id="map"></div>
</div>
<script>
  function resizeMap() {
    google.maps.event.trigger(map, "resize");
  }
  $(window).resize(resizeMap);

  var map = new google.maps.Map(document.getElementById("map"), {});
</script></code>

通过执行以下步骤，您可以确保您的 Google 地图能够动态调整以适应其容器中的任何变化尺寸。

以上是如何使用 JavaScript 动态调整 Google 地图的大小？的详细内容。更多信息请关注PHP中文网其他相关文章！