컨테이너 크기를 조정한 후 Google 지도 타일이 사라지는 것을 방지하는 방법은 무엇입니까?

JavaScript로 Google 지도 크기 조정

Google이 포함된 "mapwrap" div의 크기를 조정한 후 Google 타일이 사라지는 문제가 발생했습니다. 지도. 이 문서에서는 Google 지도 조정을 실행하는 적절한 기능을 논의하여 이 문제에 대한 해결책을 제공하는 것을 목표로 합니다.

타일은 왜 사라지나요?

" mapwrap" div를 사용하면 Google 지도가 새 크기에 자동으로 조정되지 않습니다. 이로 인해 지도 크기와 표시 영역이 일치하지 않아 타일이 사라지게 됩니다.

해결 방법

이 문제를 해결하려면 크기 조정 이벤트를 명시적으로 트리거해야 합니다. Google 지도 객체에서 이는 지도가 레이아웃을 다시 계산하고 "mapwrap" div의 새로운 크기에 맞게 조정하도록 지시합니다.

Google Maps v3의 경우 다음 함수를 사용하세요.

google.maps.event.trigger(map, "resize");

데모

이 개념을 명확히 하기 위해 jQuery를 사용한 데모가 있습니다.

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // Listen for the window resize event and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

이 예는 창 크기가 조정될 때마다 "지도" 내의 Google 지도가 -canvas" div는 자동으로 새로운 크기로 조정되어 타일이 사라지는 것을 방지합니다.

위 내용은 컨테이너 크기를 조정한 후 Google 지도 타일이 사라지는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!