Tutorial Google Map Overlay Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
Google Maps - Hamparan,Google Maps - Tambahkan tag,contoh,Google Maps - penanda draggable,contoh,Google Maps - icon,contoh,Google Maps - polyline,contoh,Google Maps - Polygon,contoh,Google Maps - Putaran,contoh,Google Maps - jendela Informasi,contoh,Google Maps - Reference Manual overlay,
Google Map Overlay
Menambahkan penanda di Google Maps
Google Maps - Hamparan
Hamparan benda terikat pada lintang / bujur pada peta, tarik atau memperbesar peta akan bergerak dengan Anda.
Google Maps API adalah lapisan berikut:
- Titik menggunakan penanda pada peta untuk menunjukkan sering menampilkan ikon kustom. Penanda adalah objek jenis GMarker, dan dapat digunakan untuk menyesuaikan jenis ikon objek GIcon.
- Garis-garis pada peta menggunakan polyline (mewakili koleksi poin) yang akan ditampilkan. baris GPolyline dari jenis objek.
- Area pada peta ditampilkan sebagai poligon (jika daerah adalah bentuk sewenang-wenang) atau overlay bawah (jika itu adalah area persegi). Polygon mirip dengan polyline tertutup, bisa bentuk apapun. hamparan tanah yang umum digunakan untuk memetakan daerah dengan ubin langsung atau tidak langsung terkait.
- Peta itu sendiri ditampilkan menggunakan overlay genteng. Jika Anda memiliki serangkaian ubin, Anda dapat menggunakan kelas GTileLayerOverlay untuk mengubah ubin yang ada di peta, Anda bahkan dapat menggunakan GMapType untuk membuat jenis peta Anda sendiri.
- jendela informasi juga merupakan jenis khusus dari overlay. Catatan, bagaimanapun, jendela informasi akan secara otomatis ditambahkan ke peta, dan peta hanya bisa menambah satu jenis GInfoWindow objek.
Google Maps - Tambahkan tag
Peta mengidentifikasi poin pada catatan. Secara default, mereka menggunakan G_DEFAULT_ICON (Anda juga dapat menentukan ikon kustom). GMarker konstruktor GLatLng dan GMarkerOptions (opsional) objek sebagai parameter.
Tags dirancang untuk menjadi interaktif. Misalnya, secara default, mereka menerima "klik" peristiwa, sering digunakan untuk membuka jendela info dalam pendengar acara.
Dengan setMap () metode untuk menambahkan penanda pada peta:
contoh
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
Coba »
Google Maps - penanda draggable
Contoh berikut menggambarkan bagaimana menggunakan properti animasi untuk menyeret penanda:
contoh
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Coba »
Google Maps - icon
Tag dapat didefinisikan dari ikon baru ditampilkan di tempat ikon default:
contoh
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Coba »
Google Maps - polyline
GPolyline objek dapat membuat overlay linear pada peta. GPolyline mencakup serangkaian poin dan menciptakan serangkaian garis teratur yang menghubungkan titik-titik ini.
Polyline mendukung atribut berikut:
- path - menentukan lebih dari satu garis lintang / bujur
- strokeColor - menentukan nilai warna heksadesimal garis (format: "#FFFFFF")
- strokeOpacity - Transparansi ditunjuk line (nilai 0,0-1,0)
- strokeWeight - Mendefinisikan lebar garis, dalam piksel.
- diedit - apakah pengguna dapat mengedit definisi garis lurus (benar / salah)
contoh
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Coba »
Google Maps - Polygon
GPolygon objek adalah objek GPolyline serupa karena mereka termasuk serangkaian titik memerintahkan. Namun, poligon adalah dua endpoint, tetapi desain area tertutup didefinisikan pembentukan.
Dan garis, Anda dapat menyesuaikan warna dan transparansi poligon tepi (garis) warna, ketebalan dan transparansi, serta penutupan daerah diisi. Warna harus dalam gaya HTML numerik heksadesimal.
Polygon mendukung atribut berikut:
- path - menentukan beberapa koordinat linear lintang (pertama dan terakhir koordinat yang sama)
- strokeColor - menentukan nilai warna heksadesimal garis (format: "#FFFFFF")
- strokeOpacity - Transparansi ditunjuk line (nilai 0,0-1,0)
- strokeWeight - Mendefinisikan lebar garis, dalam piksel.
- fillColor - daerah tertutup heksadesimal ditunjuk nilai warna (format: "#FFFFFF")
- fillOpacity - Transparansi menentukan warna fill (yang 0,0-1,0)
- diedit - apakah pengguna dapat mengedit definisi garis lurus (benar / salah)
contoh
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Coba »
Google Maps - Putaran
Bulat mendukung atribut berikut:
- pusat - titik pusat dari parameter lingkaran ditentukan google.maps.LatLng
- radius - menentukan jari-jari lingkaran, dalam meter
- strokeColor - Menentukan nilai warna busur heksadesimal (format: "#FFFFFF")
- strokeOpacity - Transparansi busur yang ditunjuk (nilai 0,0-1,0)
- strokeWeight - Mendefinisikan lebar garis, dalam piksel.
- fillColor - menentukan nilai warna heksadesimal dari nilai lingkaran mengisi (format: "#FFFFFF")
- fillOpacity - Transparansi menentukan warna fill (yang 0,0-1,0)
- Mendefinisikan apakah pengguna dapat mengedit garis lurus (benar / salah)
contoh
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Coba »
Google Maps - jendela Informasi
Pada tag untuk menampilkan jendela pesan teks:
contoh
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
Coba »
Google Maps - Reference Manual overlay
Google Maps API Reference Manual .