Bagaimanakah saya boleh mengubah saiz Peta Google secara dinamik menggunakan JavaScript?

Mengubah Saiz Peta Google secara dinamik dengan JavaScript

Apabila mengubah saiz elemen Peta Google secara dinamik, adalah penting untuk mencetuskan acara ubah saiz untuk memastikan peta melaraskan kepada dimensi baharu.

Untuk Peta Google v3

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

Untuk API Peta Google

Untuk Peta Google API, anda boleh menggunakan kod JavaScript berikut untuk mencetuskan acara ubah saiz:

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

Anda kemudian boleh memanggil resizeMap() untuk melaraskan peta kepada dimensi bekas yang dikemas kini.

Nota Tambahan:

• Acara ubah saiz mesti dicetuskan selepas dimensi baharu telah ditetapkan.
• Menggunakan pendengar ubah saiz tetingkap boleh memastikan peta bertindak balas terhadap perubahan dalam saiz tetingkap penyemak imbas.

Contoh:

<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>

Dengan mengikuti langkah-langkah ini, anda boleh memastikan bahawa Peta Google anda melaraskan secara dinamik kepada sebarang perubahan dalam bekasnya saiz.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengubah saiz Peta Google secara dinamik menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!