Menambahkan penanda ke peta Google:
Google Maps - Hamparan
Hamparan obyek di peta yang terikat untuk lintang koordinat / bujur.
Google Maps memiliki beberapa jenis lapisan:
- Marker - lokasi Tunggal pada peta. Penanda juga dapat menampilkan ikon kustom gambar
- Polyline - Series garis lurus pada peta
- Polygon - Series garis lurus pada peta, dan bentuknya "tertutup"
- Lingkaran dan Rectangle
- Info Jendela - Menampilkan konten dalam popup balon di atas peta
- hamparan kustom
Google Maps - Tambahkan Marker sebuah
The Marker konstruktor menciptakan penanda. (Perhatikan bahwa properti posisi harus diatur agar penanda untuk menampilkan).
Menambahkan penanda untuk peta dengan menggunakan setMap() metode:
Contoh
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map); Cobalah sendiri " Google Maps - Menghidupkan Marker
Contoh di bawah ini menunjukkan bagaimana untuk menghidupkan penanda dengan properti animasi:
Contoh
var
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map); Cobalah sendiri " Google Maps - Icon Daripada Marker
Contoh di bawah menentukan gambar (icon) untuk menggunakan bukan penanda standar:
Contoh
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map); Cobalah sendiri " Google Maps - Polyline
Sebuah Polyline adalah garis yang ditarik melalui serangkaian koordinat di urutan memerintahkan.
Sebuah polyline mendukung sifat sebagai berikut:
- path - menentukan koordinat beberapa lintang / bujur untuk baris
- strokeColor - menentukan warna heksadesimal untuk baris (format: "#FFFFFF")
- strokeOpacity - menentukan opacity dari baris (nilai antara 0,0 dan 1,0)
- strokeWeight - menentukan berat stroke garis dalam pixel
- diedit - mendefinisikan apakah garis adalah diedit oleh pengguna (true/false)
Contoh
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
}); Cobalah sendiri " Google Maps - Polygon
Sebuah Polygon mirip dengan Polyline di bahwa itu terdiri dari serangkaian koordinat di urutan memerintahkan. Namun, poligon dirancang untuk menentukan wilayah dalam loop tertutup.
Poligon terbuat dari garis-garis lurus, dan bentuk yang "closed" (semua lini menghubungkan).
Sebuah poligon mendukung sifat sebagai berikut:
- path - menentukan koordinat beberapa LatLng untuk garis (pertama dan terakhir koordinat yang sama)
- strokeColor - menentukan warna heksadesimal untuk baris (format: "#FFFFFF")
- strokeOpacity - menentukan opacity dari baris (nilai antara 0,0 dan 1,0)
- strokeWeight - menentukan berat stroke garis dalam pixel
- fillColor - menentukan warna heksadesimal untuk wilayah dalam wilayah tertutup (format: "#FFFFFF")
- fillOpacity - menentukan opacity dari warna isi (nilai antara 0,0 dan 1,0)
- diedit - mendefinisikan apakah garis adalah diedit oleh pengguna (true/false)
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
}); Cobalah sendiri " Google Maps - Lingkaran
Sebuah lingkaran mendukung sifat sebagai berikut:
- pusat - menentukan google.maps.LatLng dari pusat lingkaran
- radius - menentukan jari-jari lingkaran, dalam meter
- strokeColor - menentukan warna heksadesimal untuk garis di sekitar lingkaran (format: "#FFFFFF")
- strokeOpacity - menentukan opacity dari warna stroke (nilai antara 0,0 dan 1,0)
- strokeWeight - menentukan berat stroke garis dalam pixel
- fillColor - menentukan warna heksadesimal untuk wilayah dalam lingkaran (format: "#FFFFFF")
- fillOpacity - menentukan opacity dari warna isi (nilai antara 0,0 dan 1,0)
- diedit - mendefinisikan apakah lingkaran dapat diedit oleh pengguna (true/false)
Contoh
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); Cobalah sendiri " Google Maps - InfoWindow
Menunjukkan InfoWindow dengan beberapa konten teks untuk penanda:
Contoh
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker); Cobalah sendiri "