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!