Bagaimanakah saya Boleh Menyesuaikan Peta Google InfoWindows?

Memperibadikan Peta Google InfoWindows

Menggayakan InfoWindow boleh menjadi satu cabaran kerana dokumentasi terhad yang tersedia. Berikut ialah panduan terperinci tentang cara mengubah suai rupa InfoWindow:

InfoBubble

Satu pilihan ialah menggunakan pustaka InfoBubble, yang menyediakan pilihan penggayaan yang meluas di luar kemampuan daripada InfoWindow. Untuk melaksanakan InfoBubble, import fail berikut:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

Konfigurasikan InfoBubble seperti berikut:

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  // Styling options
  shadowStyle: 1,
  padding: 0,
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10,
  borderWidth: 1,
  borderColor: '#2c2c2c',
  disableAutoPan: true,
  hideCloseButton: true,
  arrowPosition: 30,
  backgroundClassName: 'transparent',
  arrowStyle: 2
});

infoBubble.open();

Info Window Custom

Sebagai alternatif, anda boleh melanjutkan kelas GOverlay daripada API Peta Google untuk mencipta InfoWindow tersuai anda sendiri. Pilihan ini memerlukan pelaksanaan kaedah tersuai untuk mencipta elemen, melukisnya pada peta dan mengendalikan acara.

Mula-mula, buat kelas InfoBox:

function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  // Initialize properties
}

Timpa kaedah yang diperlukan:

InfoBox.prototype = new google.maps.OverlayView();
// Implement createElement, draw, remove, and panMap methods

Pendekatan ini memberikan lebih fleksibiliti dalam menyesuaikan penampilan dan tingkah laku InfoWindow.

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