Bagaimanakah saya Boleh Menyesuaikan Persembahan InfoWindow Peta Google?

Memperibadikan Pembentangan InfoWindow Peta Google

Menggayakan InfoWindow dalam Peta Google boleh menimbulkan cabaran kerana dokumentasi yang terhad. Nasib baik, pelbagai pendekatan wujud untuk mencapai penyesuaian yang diingini:

Kelas InfoBubble

Google menyediakan kelas InfoBubble sebagai alternatif kepada InfoWindow. InfoBubble sangat bergaya, membolehkan anda menyesuaikan penampilannya melalui sifat seperti backgroundColor, borderRadius dan arrowStyle. Berikut ialah contoh:

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10
});

infoBubble.open();

Tersuai Tetingkap Maklumat (OverlayView)

Pendekatan lain ialah melanjutkan kelas GOverlay API Peta Google dan menggunakannya sebagai asas untuk tetingkap maklumat tersuai. Kaedah ini memberikan fleksibiliti yang lebih besar dan memerlukan kaedah pelaksanaan seperti createElement, draw dan panMap:

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  ...
}

InfoBox.prototype = new google.maps.OverlayView();

Perhatikan bahawa mengatasi kaedah yang diperlukan adalah perlu untuk mencipta tetingkap maklumat tersuai berfungsi sepenuhnya menggunakan pendekatan ini.

Mengubah suai Elemen InfoWindow dengan JavaScript

Anda juga boleh mengubah suai elemen InfoWindow secara dinamik menggunakan JavaScript (atau jQuery). Dengan memanipulasi elemen dalam InfoWindow, anda boleh mencapai beberapa tahap penyesuaian.

Atas ialah kandungan terperinci Bagaimanakah saya Boleh Menyesuaikan Persembahan InfoWindow Peta Google?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!