Penjelasan terperinci tentang set kontrol peta Google dan kode contoh

Penulis：Eve Cole Waktu Pembaruan：2025-07-27 23:32:01

Set Kontrol Google Map

Google Maps - Pengaturan Kontrol Default:

Saat menggunakan Google Maps standar, pengaturan defaultnya adalah sebagai berikut:

1.Zoom - Tunjukkan slider untuk mengontrol level zoom peta

2.ppan-peta menunjukkan kontrol seperti mangkuk datar, klik 4 sudut untuk menggerakkan peta

3.Maptype - memungkinkan pengguna untuk beralih di antara jenis peta (peta jalan dan satallite)

4. StreetView - Ditampilkan sebagai Ikon Penjahat View Jalan, Anda dapat menyeret ke titik di peta untuk membuka View Street

Google Maps - set kontrol lebih lanjut

Selain set kontrol default di atas, Google juga memiliki:

.Scale - Tampilkan skala peta

.Rotate - Menampilkan ikon lingkar kecil yang dapat memutar peta

.Verview Map - Lihat peta dari perspektif area yang luas

Saat membuat peta, Anda dapat menentukan set kontrol mana yang ditampilkan melalui opsi pengaturan atau mengubah opsi pengaturan peta dengan memanggil setOptions ().

Google Maps - Matikan set kontrol default

Anda mungkin ingin dapat mematikan set kontrol default.

Untuk mematikan set kontrol default, atur properti DisableDefaultUi dari peta ke True:

Contoh

 <html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydyy0kkjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </function script> {varcript> </script> {varcript> </script> function () {varcript> </script> function () <) google.maps.latlng (51.508742, -0.120850), zoom: 7, disableDefaultUi: true, maptypeid: google.maps.maptypeid.roadmap}; var peta = google.maps.map baru (document.geteLementById ("googlemap"), mapprop);} google.maps.event.adddomlistener (window, 'load', inisialisasi); </script> </head> <div id = "googlemap"> </div> </body </htm

Google Maps - Buka semua set kontrol

Beberapa set kontrol muncul di peta secara default, sementara yang lain tidak, kecuali Anda mengaturnya.

Atur kontrol ke true untuk membuatnya terlihat - atur kontrol ke false untuk menyembunyikannya.

Contoh berikut memungkinkan semua kontrol:

Contoh

 <html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydyy0kkjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </function script> {varcript> </script> {varcript> </script> function () {varcript> </script> function () <) google.maps.LatLng(51.508742,-0.120850), zoom:7, panControl:true, zoomControl:true, mapTypeControl:true, scaleControl:true, streetViewControl:true, overviewMapControl:true, rotateControl:true, mapTypeId: google.maps.MapTypeId.ROADMAP }; var peta = google.maps.map baru (document.geteLementById ("googlemap"), mapprop);} google.maps.event.adddomlistener (window, 'load', inisialisasi); </script> </head> <div id = "googlemap"> </div> </body </htm

Google Maps - Ubah Set Kontrol

Beberapa kontrol peta dapat dikonfigurasi. Ubah Kontrol yang ditetapkan dengan membuat bidang Opsi Kontrol.

F misalnya, opsi untuk memodifikasi kontrol zoom ditentukan dalam zoomControloptions. ZoomControloptions berisi 3 opsi berikut:

1.google.maps.zoomControlstyle.mall - tunjukkan kontrol zoom minimisasi

2.google.maps.zoomControlstyle.large - Tampilkan kontrol geser zoom standar

3.google.maps.zoomControlstyle.default-select kontrol yang paling cocok berdasarkan perangkat dan ukuran peta

Contoh

 <html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydyy0kkjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </function script> {varcript> </script> {varcript> </script> function () {varcript> </script> function () <) google.maps.latlng (51.508742, -0.120850), zoom: 7, zoomControl: true, zoomControloptions: {style: google.maps.zoomControlstyle.mall}, maptypeid: google.maps.mappappy.roadmap}; var peta = google.maps.map baru (document.geteLementById ("googlemap"), mapprop);} google.maps.event.adddomlistener (window, 'load', inisialisasi); </script> </head> <div id = "googlemap"> </div> </body </htm

Catatan: Jika Anda perlu memodifikasi kontrol, pertama -tama nyalakan kontrol (atur ke true).

Kontrol lain adalah kontrol maptype.

Kontrol maptype dapat ditampilkan sebagai salah satu opsi gaya berikut:

1.google.maps.maptypecontrolstyle.horizontal_bar, digunakan untuk menampilkan satu set kontrol sebagai tombol seperti yang ditunjukkan di peta Google di bilah horizontal.

2.google.maps.maptypeControlstyle.dropdown_menu, untuk menampilkan kontrol tombol tunggal sehingga Anda memilih jenis peta dari menu tarik-turun.

3.google.maps.maptypecontrolstyle.default, digunakan untuk menampilkan perilaku "default", yang tergantung pada ukuran layar dan dapat berubah dalam versi API yang lebih baru.

Contoh

 <html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydyy0kkjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </function script> {varcript> </script> {varcript> </script> function () {varcript> </script> function () <) google.maps.latlng (51.508742, -0.120850), zoom: 7, maptypeControl: true, maptypecontroloptions: {style: google.maps.maptypecontrolstyle.dropdown_menu}, maptypeid: google.maps.mappown var peta = google.maps.map baru (document.geteLementById ("googlemap"), mapprop);} google.maps.event.adddomlistener (window, 'load', inisialisasi); </script> </head> <div id = "googlemap"> </div> </body </htm

Juga, Anda dapat menggunakan properti ControlPosition untuk menentukan lokasi kontrol:

 <html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydyy0kkjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </function script> {varcript> </script> {varcript> </script> function () {varcript> </script> function () <) google.maps.latlng (51.508742, -0.120850), zoom: 7, maptypeControl: true, maptypecontroloptions: {style: google.maps.maptypecontrolstyle.dropdown_menu, position: google.maps.controlpomosation.dropdown_menu, position: google.maps.controlpomosation.dropdown_menu, position: google.maps.controlpowne.dropdown_menu, position: google.maps.controlpowne.dropdown_menu, position: google.maps.controlpown.dropdown_menu, position: google.maps.controlpown google.maps.maptypeid.roadmap}; var peta = google.maps.map baru (document.geteLementById ("googlemap"), mapprop);} google.maps.event.adddomlistener (window, 'load', inisialisasi); </script> </head> <div id = "googlemap"> </div> </body </htm

Google Maps - Set Kontrol Kustom

Buat kontrol khusus untuk kembali ke London untuk mengklik acara: (jika peta diseret):

Contoh

 <html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydyy0kkjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </skrip> var script; var london = new london = new london = new london = new london = new london = new london = var london = var london = var london = var london = var london = var london. google.maps.latlng (51.508742, -0.120850); // Tambahkan kontrol rumah yang mengembalikan pengguna ke londonfunction homeControl (controldiv, peta) {controldiv.style.padding = '5px'; var controlui = document.createElement ('div'); controlui.style.backgroundcolor = 'yellow'; controlui.style.border = '1px solid'; controlui.style.cursor = 'pointer'; controlui.style.textAlign = 'center'; controlui.title = 'Set Map ke London'; controldiv.appendchild (controlui); var controlText = document.createElement ('div'); controlText.style.fontfamily = 'Arial, sans-serif'; controlText.style.fontsize = '12px'; controlText.style.paddingleft = '4px'; controlText.style.paddingright = '4px'; controlText.innerHtml = '<b> home <b>' controlui.AppendChild (controlText); // Siapkan pendengar klik-event: Cukup atur peta ke london google.maps.event.adddomListener (controlui, 'klik', function () {map.setCenter (london)});} function initialize () {var mapDiv = document.getElementById ('GoogleMap'); var myoptions = {zoom: 12, center: london, maptypeId: google.maps.maptypeid.roadmap} peta = baru google.maps.map (mapDiv, myoptions); // Buat div untuk memegang kontrol dan hubungi homecontrol () var homeControldiv = document.createElement ('div'); var homecontrol = homecontrol baru (homeControldiv, peta); // homeControldiv.index = 1; peta.controls [google.maps.controlposition.top_right] .push (homeControldiv);} google.maps.event.adddomlistener (jendela, 'muat', inisialisasi); </script> </head> <div id = "GoogleMap"> </div> </script> </head> <body> <v ID = "GoogleMap"> </Div> </body> </htl>

Di atas adalah informasi yang memilah set kontrol Google Map. Kami akan terus menambahkan pengetahuan yang relevan di masa depan. Saya berharap teman -teman yang dapat membantu mengembangkan aplikasi Google Map. Terima kasih atas dukungan Anda untuk situs ini!