Peta Google mudah dibuat dengan gmaps.js

3

Peta Google telah terbukti menjadi perkhidmatan Google yang sangat berjaya, menggabungkan pelbagai alat yang tidak ternilai seperti Street View, Perancangan Laluan dan Trafik Google. Banyak syarikat dan organisasi bergantung kepada Peta Google untuk menyediakan perkhidmatan mereka - dan terima kasih kepada API Google Maps yang mereka dapat melakukannya.

Takeaways Key

gmaps.js adalah perpustakaan JavaScript sumber terbuka yang memudahkan API Google Maps JavaScript, menjadikannya lebih mudah bagi pemaju untuk membuat aplikasi tersuai dengan peta.

gmaps.js menawarkan pelbagai komponen untuk menyesuaikan peta, termasuk penanda, poligon, lapisan, geolokasi, geokod, dan acara. Ia juga membolehkan penciptaan peta statik yang boleh dimasukkan ke dalam laman web.

Perpustakaan menyediakan kaedah untuk menambahkan dan mengeluarkan penanda, melukis polylines dan poligon, mencipta bentuk bulat, dan menambah lapisan dengan kandungan HTML.

Geocoding, proses mengira koordinat geografi dari alamat lokasi tertentu, boleh dicapai dengan menggunakan kaedah geocode () dalam gmaps.js. Begitu juga, kaedah geolocate () boleh digunakan untuk mengira kedudukan geografi semasa pengguna.
gmaps.js juga menyokong peristiwa, yang membolehkan pemaju memanggil fungsi mengenai kejadian tertentu di atas peta, seperti klik dua kali atau tetikus.
• API Peta Google dan GMAPS
• Google memperkenalkan API Google Maps pada tahun 2005. Ini membolehkan pemaju membuat aplikasi tersuai dengan peta. Google kemudian melancarkan API untuk pembangunan aplikasi Android dan iOS.
• berguna seperti API peta, mereka mengambil sedikit pengetahuan untuk digunakan. Di sinilah gmaps.js masuk. Gmaps.js adalah sumber terbuka, Perpustakaan JavaScript. Ditulis oleh Gustavo Leon, GMAPS bertujuan untuk mempermudahkan Google Maps JavaScript API yang asal. Ia menjaga kod API yang luas dan menyediakan kaedah yang sesuai untuk menangani peta. Ia lebih bersih, lebih ringkas dan lebih mudah digunakan.

Dalam artikel ini, kita akan melihat komponen peta seperti penanda, poligon dan lapisan. Kami juga akan membincangkan peta statik, dan penggunaan geolokasi dan geokod untuk beroperasi di lokasi pengguna. Semua ini akan merujuk kepada GMAPS. Ia membantu anda membuat aplikasi peta dengan kaedah yang mudah digunakan. Saya telah menggunakannya untuk membuat aplikasi sampel (MAPIT), yang akan saya bincangkan lebih lanjut pada akhir artikel.

API Google dan GMAPS berbanding

Contoh di bawah adalah dari halaman dokumentasi asal. Kod (JavaScript sahaja) memuatkan peta dengan pusatnya di latitud -34.397 dan longitud 150.644, dengan tahap zoom 8:

peta adalah id elemen HTML di mana peta akan dimuat.

kita boleh menulis aplikasi asas yang sama dengan gmaps seperti ini:

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

tutorial ini akan membimbing anda melalui beberapa komponen yang paling banyak digunakan dalam peta, dengan contoh pena untuk menunjukkan masing -masing.

Bermula

Buat halaman HTML asas dan tambahkan rujukan kepada API Peta. Anda juga perlu memasukkan perpustakaan GMAPS juga. Jadi pergi ke gmaps dan muat turun gmaps.js. Sertakan di laman web anda dan anda baik untuk pergi.

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

Ini adalah halaman asas yang saya akan merujuk dalam coretan contoh di bawah. Objek peta akan diubah suai dalam beberapa contoh ini.

Komponen

API Peta menawarkan pelbagai komponen untuk menyesuaikan peta. Komponen yang sama boleh ditambah dengan GMAP dengan kurang kod.

peristiwa

Perubahan dalam DOM HTML (Model Objek Dokumen) boleh digambarkan sebagai peristiwa. Anda boleh memanggil fungsi pada kejadian peristiwa tertentu di atas peta (seperti klik dua kali atau tetikus). Coretan berikut mentakrifkan fungsi untuk klik dan zoom_changed peristiwa:

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

anda boleh menambah acara lain jika anda suka. Senarai semua peristiwa peta disediakan dalam bahagian bahagian dalam dokumentasi. Beberapa yang berguna adalah:

Acara Keterangan dblclick Klik tetikus berganda Mouseover Mouse memasuki peta Mouseout Peta keluar tetikus seret Peta diseret Rightclick Klik tetikus kanan Contoh pen

penanda

Penanda adalah pencari pada peta. Ia umumnya ditunjukkan sebagai belon yang tergantung di lokasi yang ditandai. GMAPS menawarkan kaedah Addmarker () untuk menambah penanda. Ia menerima objek literal dengan sifat -sifat berikut untuk penanda:

Lat: Latitude
lng: longitud
Tajuk: Tajuk yang dipaparkan pada Mouseover
ikon: imej tersuai untuk penanda
Butiran: Objek tersuai dengan data tambahan
Infowindow: Maklumat mengenai penanda

ini, adalah wajib untuk memberikan nilai kepada LAT dan LNG, sementara yang lain adalah pilihan. Nilai Infowindow harus menjadi objek lain. Objek ini sendiri mempunyai sifat berikut:

Kandungan: Kandungan HTML
MaxWidth: Lebar maksimum untuk tetingkap. Jika tidak ditetapkan, tetingkap merangkumi panjang teks di dalamnya.

Infowindow menyokong beberapa pilihan lagi.

Coretan ini adalah contoh yang sah dari Addmarker ():

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>

addMarker () juga menerima peristiwa - contohnya, penanda yang bertindak balas terhadap peristiwa tetikus:

<span>var m = mapObj.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>title: 'Eiffel Tower',
</span>  <span>infoWindow: {
</span>    <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span>    <span>maxWidth: 100
</span>  <span>}
</span><span>});</span>

Contoh pen

Penanda boleh dikeluarkan menggunakan kaedah penyingkiran (). Lulus objek penanda kepadanya (m dalam kes kita) sebagai hujah:

mapObj<span>.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>mouseover: function(e) {
</span>    <span>alert('Triggered');
</span>  <span>}
</span><span>});</span>

penyingkiran () secara kolektif menghilangkan semua penanda yang berkaitan dengan objek peta.

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

Geocoding

Untuk mencari sebarang titik pada peta, anda perlu mempunyai koordinat geografi ( latitud dan longitud ). Geocoding mengira koordinat geografi ini dari alamat lokasi tertentu. Kaedah geokod () membolehkan kita melakukan perkara yang sama. Ia mengambil alamat lokasi sebagai input dan proses koordinat untuk alamat itu.

• Alamat: String alamat lokasi
• panggil balik: fungsi yang dipanggil selepas geocoding

mari kita hitung latitud dan longitud untuk Stonehenge , terletak di United Kingdom . Coretan di bawah akan mengira koordinat geografi alamat yang diberikan, dan memusatkan peta di lokasi tersebut. Sekiranya tiada hasil dijumpai, mesej dipaparkan:

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

Kaedah setCenter () mengambil latitud dan longitud sebagai parameternya dan memusatkan peta di lokasi geografi itu. Ia juga menerima parameter panggilan balik pilihan, fungsi yang dicetuskan selepas peta berpusat.

Terdapat dua parameter dalam fungsi panggil balik: hasil dan status.

Hasil adalah pelbagai objek, menyimpan lokasi semua tempat dengan alamat yang ditetapkan. Memandangkan terdapat lebih daripada satu tempat dengan nama yang sama, terdapat lebih daripada satu hasil. Keputusan menyimpan setiap satu daripada mereka. Lokasi hasil i

th ^{boleh ditentukan menggunakan hasil [i] .geometry.location.}

Jika tiada keputusan ditemui untuk alamat, kedai status

ZERO_RESULTS , lain ok .

Contoh pen

Geolocation

Geolokasi mengira kedudukan geografi semasa pengguna. Kaedah Geolocate () membolehkan kita mengeksploitasi ciri ini. Ia menerima objek literal dengan empat sifat, yang selalu menjadi pilihan dan yang lain diperlukan. Setiap harta ditakrifkan sebagai fungsi yang dilaksanakan dalam kes tertentu:

Kejayaan: Geolocation berjaya
ralat: geolokasi tidak berjaya
not_supported: penyemak imbas tidak menyokong geolokasi
selalu: dilaksanakan dalam setiap kes

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Contoh pen

Polylines

Polylines membantu mengesan jalan pada peta. Laluan boleh dibentuk dengan menyertai koordinat mata yang berbeza. Kaedah DrawPolyline () menarik polyline untuk jalan. Laluan ini disediakan sebagai pelbagai koordinat (

latitud dan longitud ). Selain dari jalan, anda boleh menentukan sifat lain untuk polyline. Sebahagian daripada mereka adalah:

Strokeight
StrokeColor
strokeopacity

Ketiga menentukan gaya untuk polyline. Terdapat juga orang lain, walaupun kita tidak akan menutupinya dalam artikel ini.

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>

Contoh pen

Polyline boleh dikeluarkan menggunakan kaedah RovePolyLine (). Ia mengambil objek polyline sebagai parameternya. Keluarkan PL Polyine menggunakan:

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

penyingkiranPolylines () menghilangkan semua polylines yang dikaitkan dengan objek peta.

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

Polygons

DrawPolygon () membantu anda membuat poligon pada peta. Cukup seperti kaedah DrawPolyline (), anda perlu menentukan harta laluan. Ciri -ciri gaya strok (strokeweight, strokecolor dan strokeopacity) kerja poligon juga. Mereka menentukan sempadan poligon. Selain itu, anda boleh menentukan warna dan kelegapan untuk poligon:

• fillColor
• fillOpacity

Pilihan poligon lain boleh didapati dalam dokumentasi.

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

ingat: ia adalah harta laluan untuk drawpolyline () dan harta benda untuk drawpolygon ().

Contoh pen

Untuk mengeluarkan PG poligon, gunakan:

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>

Keluarkan semua poligon yang ditakrifkan dalam MAPOBJ:

<span>var m = mapObj.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>title: 'Eiffel Tower',
</span>  <span>infoWindow: {
</span>    <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span>    <span>maxWidth: 100
</span>  <span>}
</span><span>});</span>

Circles

Membuat bentuk bulat dengan drawpolygon () tidak berdaya maju. DrawCircle () membantu anda dengan itu. Senarai parameternya termasuk:

• latitud: latitud untuk pusat
• lng: longitud untuk pusat
• jejari: jejari di meter di permukaan bumi.

Pilihan lain termasuk gaya untuk strok dan mengisi bentuk (sama seperti poligon), dan beberapa lagi.

mapObj<span>.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>mouseover: function(e) {
</span>    <span>alert('Triggered');
</span>  <span>}
</span><span>});</span>

Contoh pen

overlays

Overlay adalah lapisan di atas peta dengan kandungan HTML di atasnya. GMAPS menyokong overlays dengan kaedah DrawOrlerlay (). Ia menerima hash berikut:

• Lat: Latitude
• lng: longitud
• Kandungan: Kandungan HTML
• Verticalalign: atas, tengah, bawah
• Horizontalalgin: kiri, tengah, kanan
• VerticalOffset
• HorizontalOffset

penjajaran dan offset adalah berkenaan dengan titik yang ditakrifkan oleh lat dan lng.

Contoh Snippet:

mapObj<span>.removeMarker(m);</span>

anda boleh menentukan gaya CSS untuk kandungannya. Dalam contoh kami, kami telah menentukan kelas Overlay.

mapObj<span>.removeMarkers();</span>

Contoh pen

Keluarkan Overlay? Nah, anda tahu:

<span>GMaps.geocode({
</span>  <span>address: 'Stonehenge, United Kingdom',
</span>  <span>callback: function(results<span>, status</span>) {
</span>    <span>if (status == 'OK') {
</span>      latlng <span>= results[0].geometry.location;
</span>      mapObj<span>.setCenter(latlng.lat(), latlng.lng());
</span>    <span>} else if (status == 'ZERO_RESULTS') {
</span>      <span>alert('Sorry, no results found');
</span>    <span>}
</span>  <span>}
</span><span>});</span>

Keluarkan semua lapisan untuk objek peta? Anda juga tahu bahawa:

<span>GMaps.geolocate({
</span>  <span>success: function(position) {
</span>    mapObj<span>.setCenter(position.coords.latitude, position.coords.longitude);
</span>  <span>},
</span>  <span>error: function(error) {
</span>    <span>alert('Geolocation failed: ' + error.message);
</span>  <span>},
</span>  <span>not_supported: function() {
</span>    <span>alert("Your browser does not support geolocation");
</span>  <span>},
</span>  <span>always: function() {
</span>    <span>alert("Always");
</span>  <span>}
</span><span>});</span>

Peta Statik

Peta statik adalah imej peta, yang secara bebas boleh dimasukkan ke dalam laman web. GMAPS membolehkan anda menjana URL ke peta statik. URL ini kemudiannya boleh ditambah sebagai sumber kepada imej.

staticMapurl () menghasilkan url peta yang diperlukan setelah mengambil parameter berikut:

• saiz: pelbagai lebar dan ketinggian dalam piksel
• Lat
• lng
• zoom

coretan kod:

<span>var path = [
</span>  <span>[-12.044012922866312, -77.02470665341184],
</span>  <span>[-12.05449279282314, -77.03024273281858],
</span>  <span>[-12.055122327623378, -77.03039293652341],
</span>  <span>[-12.075917129727586, -77.02764635449216],
</span>  <span>[-12.07635776902266, -77.02792530422971],
</span>  <span>[-12.076819390363665, -77.02893381481931],
</span>  <span>[-12.088527520066453, -77.0241058385925]
</span><span>];
</span>
<span>var pl = mapObj.drawPolyline({
</span>  <span>path: path,
</span>  <span>strokeColor: '#76ff03',
</span>  <span>strokeOpacity: 1,
</span>  <span>strokeWeight: 10
</span><span>});</span>

Contoh pen

Dalam contoh kami, kami telah mencipta elemen IMG dan menambah URL ke SRCnya:

mapObj<span>.removePolyline(pl);</span>

kita boleh memohon penanda dan polylines ke peta statik juga.

Contoh pen

Contoh Aplikasi (MAPIT)

MAPIT (Lihat Sumber di GitHub) Mewujudkan peta statik untuk laluan antara sumber dan destinasi. Zum turun ke alamat di peta dan letakkan dua penanda (sumber dan destinasi). Mapit akan mengesan laluan dari satu penanda ke yang lain. Ia akan membuat URL ke peta statik dengan konfigurasi semasa. Anda boleh pratonton peta statik dan memuat turun imej.

Kesimpulan

Artikel ini merangkumi komponen asas peta. Saya pasti ia telah berfungsi sebagai panduan permulaan yang baik untuk GMAP dan aplikasi peta interaktif. Tetapi ia tidak sepatutnya berhenti di sini. Terdapat banyak lagi yang boleh anda lakukan dengan GMAPSJS.

Adakah anda pernah menggunakan GMAPS? Jika ya, apakah pengalaman anda. Sekiranya anda mempunyai komen atau soalan, sila sertai perbincangan di bawah.

Soalan Lazim (Soalan Lazim) Mengenai Peta Google dengan Gmaps.js

Bagaimana saya boleh memulakan dengan gmaps.js?

Selepas itu, masukkan perpustakaan GMaps.js. Anda boleh memuat turunnya dari repositori GitHub rasmi atau menggunakan CDN. Sebaik sahaja anda memasukkan skrip ini, anda boleh memulakan peta baru dengan membuat objek GMAPS baru dan lulus dalam ID elemen HTML di mana anda mahu peta dipaparkan, bersama dengan beberapa pilihan seperti latitud dan longitud pusat daripada peta.

Apakah ciri -ciri utama gmaps.js? Ia menyediakan API yang mudah dan intuitif untuk mencipta dan memanipulasi peta. Ciri -ciri utama termasuk keupayaan untuk dengan mudah menambah penanda, poligon, dan lapisan, geolokasi, geokod, dan banyak lagi. Ia juga menyokong peristiwa, membolehkan anda bertindak balas terhadap interaksi pengguna seperti klik atau seret. .js adalah mudah. Anda boleh menggunakan kaedah Addmarker pada objek GMAPS anda, melewati objek dengan latitud dan longitud penanda. Anda juga boleh memasukkan pilihan lain seperti tajuk, klik acara, dan banyak lagi.

Bagaimana saya boleh menggunakan geolokasi dengan gmaps.js? Dapatkan lokasi semasa pengguna. Kaedah ini mengembalikan janji yang menyelesaikan dengan latitud dan longitud pengguna. Anda kemudian boleh menggunakan maklumat ini untuk memusatkan peta di lokasi pengguna atau menambah penanda di lokasi mereka. Alamat ke dalam koordinat geografi, yang boleh anda gunakan untuk meletakkan penanda atau meletakkan peta. Gmaps.js menyediakan kaedah geokod yang mengambil alamat dan mengembalikan janji yang menyelesaikan dengan hasil geocoded.

Bagaimana saya boleh menambah acara ke peta dengan gmaps.js?

gmaps.js menyokong pelbagai acara, termasuk klik, seret, zoom_changed, dan banyak lagi. Anda boleh menambah pendengar acara ke objek GMAPS anda menggunakan kaedah addListener, lulus dalam nama acara dan fungsi panggil balik yang akan dilaksanakan apabila peristiwa berlaku. ? Anda boleh menambah lapisan menggunakan kaedah AddLayer pada objek GMAPS anda, lulus dalam nama lapisan. Menyediakan kaedah untuk melukis pelbagai bentuk pada peta, termasuk garis, poligon, bulatan, dan segi empat tepat. Anda boleh menggunakan kaedah drawoverlay, drawpolygon, drawcircle, dan drawrectangle pada objek gmaps anda. Sesuaikan penampilan peta menggunakan gaya. Anda boleh lulus dalam pilihan gaya apabila membuat objek GMAPS anda, yang sepatutnya menjadi pelbagai objek gaya yang menggambarkan bagaimana unsur -unsur yang berbeza dari peta harus digayakan. 🎜>

gmaps.js menyediakan cara untuk mengendalikan kesilapan yang berlaku semasa menggunakan perpustakaan. Anda boleh mendengar peristiwa 'ralat' pada objek GMAPS anda, yang akan dicetuskan apabila ralat berlaku. Objek acara akan mengandungi maklumat mengenai ralat, termasuk mesej dan jejak timbunan.

Atas ialah kandungan terperinci Peta Google mudah dibuat dengan gmaps.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!