JavaScript를 사용하여 Google 지도의 크기를 동적으로 조정하려면 어떻게 해야 하나요?

JavaScript를 사용하여 Google 지도의 크기를 동적으로 조정

Google 지도 요소의 크기를 동적으로 조정할 때 지도 크기 조정 이벤트를 트리거하여 지도를 확보하는 것이 중요합니다. 새로운 크기로 조정됩니다.

Google Maps v3의 경우

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

Google Maps API의 경우

Google Maps의 경우 API에서는 다음 JavaScript 코드를 사용하여 크기 조정 이벤트를 트리거할 수 있습니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!