Bagaimana untuk Mengelakkan Jubin Peta Google daripada Hilang Selepas Mengubah Saiz Bekas?

Mengubah saiz Peta Google dengan JavaScript

Anda telah menghadapi isu di mana jubin Google hilang selepas mengubah saiz div "mapwrap" yang mengandungi Google peta. Artikel ini bertujuan untuk memberikan penyelesaian kepada masalah ini dengan membincangkan fungsi yang sesuai untuk mencetuskan pelarasan peta Google.

Mengapa Jubin Hilang?

Apabila anda mengubah saiz " mapwrap" div, peta Google tidak melaraskan secara automatik kepada saiz baharu. Ini mengakibatkan ketidakpadanan antara dimensi peta dan kawasan paparan, menyebabkan jubin hilang.

Penyelesaian

Untuk membetulkannya, anda perlu mencetuskan acara ubah saiz secara eksplisit pada objek peta Google. Ini mengarahkan peta untuk mengira semula reka letaknya dan melaraskan kepada dimensi baharu div "pembungkus peta".

Untuk Peta Google v3, gunakan fungsi ini:

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

Demonstrasi

Untuk menjelaskan konsep ini, berikut ialah demonstrasi menggunakan 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");
  });
});

Contoh ini memastikan bahawa apabila tetingkap diubah saiz, peta Google dalam "peta -canvas" div akan melaraskan secara automatik kepada saiz baharu, menghalang jubin daripada hilang.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Jubin Peta Google daripada Hilang Selepas Mengubah Saiz Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!