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 »