Bagaimana untuk Mengubah Saiz Peta Google Secara Dinamik dengan JavaScript?

Cara Mengubah Saiz Peta Google dengan JavaScript selepas Memuat

Apabila bekerja dengan Peta Google, kadangkala perlu mengubah saiz peta selepas ia dimuatkan. Ini boleh dicapai melalui JavaScript, tetapi ia memerlukan beberapa langkah khusus untuk memastikan jubin peta dilaraskan dengan sewajarnya.

Untuk mengubah saiz Peta Google dalam v3, ikut prosedur ini:

1. Ubah saiz ibu bapa
   atau elemen kontena yang memegang Peta Google menggunakan JavaScript atau CSS.
2. Cetuskan acara "ubah saiz" pada objek Peta Google.

Cetuskan Peristiwa Ubah Saiz

Dalam Peta Google v3, acara ubah saiz perlu dicetuskan secara eksplisit:

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

di mana peta ialah objek Peta Google yang memerlukan saiz semula.

Contoh dengan jQuery

Berikut ialah contoh menggunakan jQuery untuk mengendalikan saiz semula tetingkap dan mencetuskan saiz semula Peta Google:

<code class="javascript">$(function() {
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});</code>

Dengan mengikuti langkah ini, anda boleh mengubah saiz Peta Google dengan berkesan dan memastikan bahawa jubin peta dilaraskan dan dipaparkan dengan betul dalam dimensi baharu.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Peta Google Secara Dinamik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!