Bagaimana untuk Mencipta InfoWindows Tersuai dengan Sudut Persegi dalam Peta Google?

Mencipta Custom InfoWindows dalam Peta Google

Tetingkap Info Peta Google lalai, yang muncul apabila penanda peta diklik, selalunya menampilkan sudut bulat. Walau bagaimanapun, anda mungkin menginginkan InfoWindow yang lebih disesuaikan dengan sudut segi empat sama. Artikel ini memberikan panduan untuk mencapai penyesuaian ini.

Menggunakan Perpustakaan JavaScript

Perpustakaan JavaScript luaran menawarkan penyelesaian yang teguh untuk mencipta InfoWindows tersuai. Satu pilihan yang popular ialah perpustakaan Buih Maklumat Peta Google. Ia membolehkan anda mengubah suai rupa, bentuk dan kandungan InfoWindows agar sesuai dengan keperluan khusus anda.

Contoh Pelaksanaan

Coretan kod berikut menunjukkan cara melaksanakan tersuai InfoWindow menggunakan pustaka Info Bubble:

<code class="js">const infoBubble = new google.maps.InfoWindowBubble({
  maxWidth: 300, // Maximum width of the InfoWindow
  maxHeight: 200, // Maximum height of the InfoWindow
  arrowPosition: 50, // Offset of the arrow from the center of the InfoWindow
  padding: 10, // Padding around the content of the InfoWindow
  borderWidth: 1, // Border width around the InfoWindow
  borderColor: "#000000", // Border color of the InfoWindow
  backgroundColor: "#FFFFFF", // Background color of the InfoWindow
  hideCloseButton: true, // Hide the close button on the InfoWindow
  borderRadius: 0, // Set the border radius to 0 for square corners
});

// Attach the custom InfoWindow to a map marker
const marker = new google.maps.Marker({
  position: {
    lat: 0,
    lng: 0,
  },
  map,
});
marker.addListener("click", () => {
  infoBubble.setContent("This is a custom InfoWindow.");
  infoBubble.open(map, marker);
});</code>

Contoh ini mencipta InfoWindow berpenjuru segi empat sama dengan saiz maksimum 300px lebar dan 200px tinggi. Ia mempunyai sempadan hitam, latar belakang putih dan tiada butang tutup yang boleh dilihat.

Alternatif

Jika pustaka Info Bubble tidak memenuhi keperluan anda, pertimbangkan untuk meneroka pilihan lain seperti sebagai pustaka MarkerClusterer atau pustaka DataLayer. Kedua-duanya menyediakan penyelesaian yang fleksibel untuk menyesuaikan InfoWindows dan meningkatkan pengalaman Peta Google anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta InfoWindows Tersuai dengan Sudut Persegi dalam Peta Google?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!