Google Maps - Overlay
Overlay adalah objek yang terikat pada koordinat bujur/lintang pada peta dan akan bergerak saat Anda menyeret atau memperbesar peta.
API Google Maps memiliki overlay berikut:
1. Titik -titik di peta ditampilkan menggunakan penanda, dan ikon khusus biasanya ditampilkan. Tag adalah objek tipe gmarker, dan ikon dapat disesuaikan menggunakan objek tipe gicon.
2. Garis -garis pada peta ditampilkan menggunakan polylines (mewakili kumpulan titik). Garis adalah objek tipe gpolyline.
3. Area pada peta ditampilkan sebagai poligon (jika itu adalah bentuk sewenang -wenang) atau overlay permukaan bawah (jika merupakan area persegi panjang). Poligon mirip dengan polyline tertutup, sehingga bisa menjadi bentuk apa pun. Hamparan tanah biasanya digunakan pada peta yang memiliki asosiasi langsung atau tidak langsung dengan ubin.
4. Peta itu sendiri ditampilkan menggunakan overlay ubin. Jika Anda memiliki serangkaian ubin sendiri, Anda dapat menggunakan kelas GTilelayerOverlay untuk mengubah ubin yang sudah Anda miliki di peta, atau bahkan menggunakan gmaptype untuk membuat jenis peta Anda sendiri.
5. Jendela informasi juga merupakan lapisan overlay khusus. Namun, harap dicatat bahwa jendela informasi secara otomatis ditambahkan ke peta, dan peta hanya dapat menambahkan satu objek tipe ginfowindow.
Google Maps - Tambahkan tag
Tandai poin pada peta. Secara default, mereka menggunakan g_default_icon (Anda juga dapat menentukan ikon khusus). Konstruktor Gmarker mengambil objek Glatlng dan GmarkerOptions (Opsional) sebagai parameter.
Penanda dirancang untuk menjadi interaktif. Misalnya, secara default mereka menerima acara "klik", yang sering digunakan untuk membuka informasi Windows di Event Listeners.
Tambahkan tag di peta melalui metode setMap ():
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </</skrip> var scripter = google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var peta = Google baru.maps.maps (document.getelement) (document. google.maps.marker ({position: mycenter,}); marker.setMap (peta);} google.maps.event.adddomlistener (window, 'muat', inisialisasi); </script> </head> <div id = "googlemap"> </div> </body> </html>Contoh Rendering:
Google Maps - Tag yang Dapat Diberikan
Contoh berikut menjelaskan cara menggunakan properti animasi untuk menyeret tag:
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </</skrip> var scripter = google.maps.latlng (51.508742, -0.120850); var marker; function initialize () {var mapprop = {center: mycenter, zoom: 5, maptypeId: google.maps.maptypeid.roadmap}; var map = new google.maps.mappap (document. google.maps.marker ({position: myCenter, animasi: google.maps.animation.bounce}); marker.setMap (peta);} google.maps.event.adddomlistener (window, 'muat', inisialisasi); </scrip> </head> <body> <div id = "googlemap"> </script> </head> </head> <body> <div id = "googlemap"> </script> </head> </head> <body> <body> <div iD = "googlemap"> </script> </head> </head> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> </head>Google Maps - Ikon
Tag dapat ditampilkan dengan ikon baru khusus, bukan ikon default:
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </</skrip> var scripter = google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var peta = Google baru.maps.maps (document.getelement) (document. google.maps.Marker({ position:myCenter, icon:'pinkball.png' });marker.setMap(map);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Google Maps - Garis Lipat
Objek gpolyline membuat overlay linier pada peta. GPolyline mencakup serangkaian poin dan menciptakan serangkaian segmen garis yang menghubungkan titik -titik ini dengan cara yang tertib.
Polylines mendukung sifat -sifat berikut:
Jalur - Menentukan koordinat lintang/bujur dari beberapa garis lurus
Strokecolor - Menentukan nilai warna heksadesimal dari garis (format: "#ffffff")
StrokePacity - Menentukan transparansi suatu garis (nilainya 0,0 hingga 1,0)
Strokeweight - Menentukan lebar garis dalam piksel.
Edited - mendefinisikan apakah pengguna dapat mengedit garis lurus (true/false)
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </skrip> var x = google.maps.latlng (52.395715,4.888916); var stavanger = baru google.maps.latlng (58.983911,5.734863); var amsterdam = Google.maps.latlng baru (52.39715715.8886; google.maps.latlng (51.508742, -0.120850); fungsi initialize () {var mapprop = {center: x, zoom: 4, maptypeId: google.maps.maptypeid.roadmap}; var peta = google.maps.map baru (document.geteLementById ("googlemap"), mapprop); var mytrip = [Stavanger, Amsterdam, London]; var flightpath = baru google.maps.polyline ({path: mytrip, strokecolor: "#0000FF", strokePOSICASICICY: 0. 8 }); flightpath.setMap (peta);} google.maps.event.adddomlistener (jendela, 'muat', inisialisasi); </script> </head> <body> <v id = "googlemap"> </div> </body> </html>Contoh Rendering:
Google Maps - Poligon
Objek gpolygon mirip dengan objek gpolyline karena mereka semua menyertakan serangkaian poin yang dipesan. Namun, alih -alih memiliki dua titik akhir seperti polyline, poligon dirancang untuk menentukan area yang membentuk loop tertutup.
Seperti polylines, Anda dapat menyesuaikan warna, ketebalan, dan transparansi tepi poligon (garis), serta warna dan transparansi area pengisian tertutup. Warnanya harus dalam gaya hexadecimal html gaya.
Poligon mendukung sifat -sifat berikut:
Jalur - Menentukan koordinat lintang garis lurus beberapa (koordinat pertama dan terakhir adalah sama)
Strokecolor - Menentukan nilai warna heksadesimal dari garis (format: "#ffffff")
StrokePacity - Menentukan transparansi garis (nilai ini 0,0 hingga 1,0)
Strokeweight - Menentukan lebar garis dalam piksel.
FillColor - Menentukan nilai warna heksadesimal untuk area tertutup (format: "#ffffff")
Fillopacity - Menentukan transparansi warna pengisian (nilainya 0,0 hingga 1,0)
Edited - mendefinisikan apakah pengguna dapat mengedit garis lurus (true/false)
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </skrip> var x = google.maps.latlng (52.395715,4.888916); var stavanger = baru google.maps.latlng (58.983911,5.734863); var amsterdam = Google.maps.latlng baru (52.39715715.8886; google.maps.latlng (51.508742, -0.120850); fungsi initialize () {var mapprop = {center: x, zoom: 4, maptypeId: google.maps.maptypeid.roadmap}; var peta = google.maps.map baru (document.geteLementById ("googlemap"), mapprop); var mytrip = [Stavanger, Amsterdam, London, Stavanger]; var flightpath = new google.maps.polygon ({Path: mytrip, strokeColor: "#0000ff ({{{path: mytrip, strokeColor:"#0000ff: "#000000F:" FillColor: "#0000ff", Fillopacity: 0.4}); flightpath.setMap (peta);} google.maps.event.adddomlistener (window, 'muat', inisialisasi); </script> </head> <div id = "googlemap"> </div> </body> </htmContoh Rendering:
Google Maps - Lingkaran
Lingkaran mendukung properti berikut:
Center - Tentukan parameter titik tengah lingkaran Google.maps.latlng
Radius - Menentukan jari -jari lingkaran dalam meter
Strokecolor - Menentukan nilai warna heksadesimal busur (format: "#ffffff")
StrokePacity - Menentukan transparansi busur (nilainya 0,0 hingga 1,0)
Strokeweight - Menentukan lebar garis dalam piksel.
FillColor - Menentukan nilai pengisian nilai warna heksadesimal dari lingkaran (format: "#ffffff")
Fillopacity - Menentukan transparansi warna pengisian (nilainya 0,0 hingga 1,0)
Mendefinisikan apakah pengguna dapat mengedit garis lurus (true/false)
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydyy0kjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </skrip> var var amsterdam = newSensor=false "> </script> script> var amsterdam = google.maps.latlng (52.395715,4.888916); function initialize () {var mapprop = {center: amsterdam, zoom: 7, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);var myCity = new google.maps.Circle({ center:amsterdam, radius:20000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 }); mycity.setMap (peta);} google.maps.event.adddomlistener (window, 'muat', inisialisasi); </script> </head> <body> <v id = "googlemap"> </div> </body> </html>Contoh Rendering:
Google Maps - Jendela Informasi
Tampilkan jendela pesan teks pada tag:
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </</skrip> var scripter = google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var peta = Google baru.maps.maps (document.getelement) (document. google.maps.marker ({position: mycenter,}); marker.setMap (peta); var infowindow = google.maps.infowindow baru ({konten: "hello world!"}); infowindow.open (peta, marker);} google.maps.event.adddomleTener (window, 'window);} google.maps.event.adddomleistener (window,' window); id = "googlemap"> </div> </body> </html>Contoh Rendering:
Di atas adalah kompilasi informasi tentang overlay Google Maps. Kami akan terus menambahkannya nanti. Terima kasih atas dukungan Anda untuk situs ini!