Bagaimanakah saya Boleh Menyesuaikan Peta Google InfoWindows?

Linda Hamilton
Lepaskan: 2024-11-04 10:54:29
asal
546 orang telah melayarinya

How Can I Customize Google Maps 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
Salin selepas log masuk

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();
Salin selepas log masuk

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
}
Salin selepas log masuk

Timpa kaedah yang diperlukan:

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

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan