Google Maps JavaScripti API õpetus: lisage oma veebisaidile kohandatud kaart

Google Maps aitab meil iga päev maanteedel liikuda ja kohti leida viisil, mis oli mõnekümne aasta eest kujuteldamatu. See pole kasulik ainult otsimisel, vaid näeme ka palju näiteid andmete visualiseerimiseks kasutatavate kaartide kohta, näiteks see, kui hiljuti kasutavad paljud veebisaidid kaarte, et visualiseerida COVID-19 levikut kogu maailmas. Täna õppige, kuidas saaksime kasutada Google Mapsi JavaScripti API-d oma veebisaitide ja rakenduste jaoks kohandatud kaartide loomiseks.


Teil võib tekkida küsimus, miks peaksime kasutama kaarte Google Maps JavaScripti API, et kaardid luua Staatiline kaart selle asemel või kasutage mõnda saadaolevat WordPressi pistikprogrammi, et seda teha ilma kodeerimiseta.

Muidugi on mõlemad suurepärased võimalused, kui soovite oma veebisaidil kuvada mõnda ettevõtte asukohta. Kuid Google Mapsi JavaScripti API-l on teile rohkem kontrolli juhuks, kui soovite luua kohandatud kaarti keerukamaks, kui eelmonteeritud pistikprogrammil pakkuda on..

Google Mapsi JavaScripti API õpetus

Kui te ei soovi kulutada aega kodeerimisele ja soovite oma veebisaidil kaartide kuvamiseks arusaadavamat viisi, soovitan Google Mapsi blokk Otterist.

Google Mapsi JavaScripti API-võtme hankimine

Enne alustamist peame kõigepealt hankima Google Mapsi API-võtme. Saad seda siit siin. Google Mapsi API ei ole täiesti tasuta, kuid sellega on kaasas tasuta plaan, millest enamikul juhtudel piisab.

Kas teil on API võtmeid? Tehke ringteelt kolmas väljumine ja jätkake õpetusega. ��

Lihtsa kaardi loomine

Põhiline Google Mapsi eksemplar vaikesätetega.Põhiline Google Mapsi eksemplar vaikesätetega.

Esiteks ehitame alustamiseks lihtsa Google Map. Ehkki saate oma JavaScripti ja CSS-i eraldada, kasutame selles õpetuses ühte HTML-faili. Kasutame järgmist struktuuri:

html>
<html>
<pea>
<pealkiri>Lihtne pealkiri>
<meta nimi ="vaateava" sisu ="algskaala = 1,0">
<metakaart ="utf-8">
<stiil>
#map {
kõrgus: 100%;
}

html, keha {
kõrgus: 100%;
veeris: 0;
polster: 0;
}
stiil>
pea>
<keha>
<div id ="kaart">div>
<skript>
lase kaardil;
funktsioon initMap () {
map = uus google.maps.Map (document.getElementById (‘map’), {
Keskus: {
lat: 51,513329,
lng: -0,088950
},
suum: 14
});
}
skript>
<skript src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&tagasihelistamine = initMap" asünkri edasilükkamine>skript>
keha>
html>

Kui Google Maps API on laaditud, kutsub see funktsiooni initMap, mis kaardi lähtestab. Kui me oma koodi veelgi lagundame, kasutame kaardi ID-ga tühja jaotust kaardi ID-ga, et teatada, kuhu kaarti anda..

lase kaardil;
funktsioon initMap () {
map = uus google.maps.Map (document.getElementById (‘map’), {
Keskus: {
lat: 51,513329,
lng: -0,088950
},
suum: 14
});
}

Esiteks seadsime meie JavaScriptis kaardimuutuja funktsioonist väljapoole, nii et see on osa globaalsest ulatusest, et saaksime kaarti hiljem muuta. Funktsioonis initMap kuulutame esmalt välja uue Google Mapi ja seame selle renderdamiseks, kutsudes elemendi kaardi ID-ga. Pärast seda täpsustame oma valikud, milleks on kaardi keskpunkt ja suumi tase.

Me kasutame Londoni City koordinaate, ajalooline maamärk Londoni keskel, kui kaardikeskus. Hiljem arutame, kuidas saate Maps API abil kaardil mis tahes asukoha koordinaate leida. Kuid nüüd, kui teil on uudishimu, saate seda kasutada latlong.net mis tahes aadressi koordinaatide kiireks leidmiseks.

Kaarditüübid

Nüüd, kui meil on põhikaart, saame vaadata kohandamisvalikuid, mille Google Maps JavaScripti API meile pakub. Esimene võimalus, mida me kasutama hakkame, on kaardi tüüp. Google Maps toetab nelja tüüpi kaarte, mis on järgmised:

  • teekaart: vaikekaart, mida tavaliselt näed.
  • satelliit: Google Mapsi ja Google Earth satelliitvaade, kui see on saadaval.
  • hübriid: segu teekaardist ja satelliitvaatest.
  • maastik: maastiku teabel põhinev kaart, näiteks mäed ja orud.

Oma kaardivalikute jaoks saame lisada omaduse mapType, et valida soovitud vaade, näiteks:

map = uus google.maps.Map (document.getElementById (‘map’), {
Keskus: {
lat: 51,513329,
lng: -0,08895
},
suum: 14,
mapTypeId: hübriid
});

Meie näitel kasutame hübriidkaarti. Saate katsetada erinevaid tüüpe, et näha, milline neist sobib teie kasutusjuhuga.

Kaardivalikud

Pärast kaarditüüpi jõuame kaardi juhtelemendid. Google Maps võimaldab teil oma kaartidel kasutada mõnda selle kuuest juhtelemendist. Leiate juhtelementide loendi nende veebisaidil.

Saate täpsustada juhtnuppu, mida soovite kasutada, ja vajaduse korral selle asukohta:

map = uus google.maps.Map (document.getElementById (‘map’), {
Keskus: {
lat: 51,513329,
lng: -0,08895
},
suum: 14,
mapTypeId: hübriid,
scaleControl: tõsi,
fullscreenControlOptions: {
positsioon: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Lubame scaleControli, mis näitab kaardi ulatust kõige alumises servas koos Google’i autoriõigustega, kuulutades selle TÕELISEKS. Ja järgmisel real muudame fullscreenControli välimuse vaikeasendist paremas ülanurgas parempoolseks, kasutades atribuuti fullscreenControlOptions. Samamoodi saate reguleerida teiste juhtelementide asukohta.

Kas soovite juhtimisseadet, mis teeb midagi muud kui sisseehitatud? Ärge muretsege, Google Maps võimaldab teil luua oma kaardile ka kohandatud juhtelemente.

Räägime markeritest!

Markeri lisamine

Markerid on hämmastavad ja nende abil on võimalik kaardiga luua palju interaktiivseid rakendusi. Näiteks kasutavad mõned hotellibroneerimise veebisaidid markerite abil teile hotelli asukohta kaardil. Ja neid on ka väga lihtne lisada.

Las on lisage marker London Bridge’i järgmise koodiga:

lase marker = uus google.maps.Marker ({
positsioon: {
lat: 51,506821,
lng: -0,0879
},
kaart: kaart,
pealkiri: ‘Londoni sild’
});

Nagu ülal näete, on meie markeri koodil kolm omadust. Esimene neist on koordinaadid. Pärast seda edastame kaardimuutuja, kuhu alguses oma kaardi salvestasime, ja lõpuks kanname üle markeri pealkirja.

Võite URL-i edastada ka ülaltoodud koodiplokis asuva ikooniomadusega kohandatud markeriikoonile.

Infoakna lisamine

Võib-olla leiate meie markerite hulgast midagi puudu. Tavaliselt, kui klõpsate markeril kaardil, kuvatakse sellel hüpik, kus on rohkem üksikasju. See hüpik on iseenesest erinev komponent, mida nimetatakse Infoaken.

Google Maps kohandatud markeriga.Google Maps kohandatud markeriga.

Meie õnneks on Infomarki oma markeriga väga lihtne kinnitada.

lase infoWindow = uus google.maps.InfoWindow ({
sisu: ‘

Londoni sild


});

marker.addListener (‘klõps’, funktsioon () {
infoWindow.open (kaart, marker);
});

Esiteks loome uue infoWindow muutuja, mis salvestab meie InfoWindow komponendi. Anname talle ainult sellise sisu omaduse, mis sisaldab HTML-i, mida ta kord klõpsamisel näitab. Pärast seda lisame oma markerile klõpsuga sündmuste kuulaja, kes käsib tal markeril klõpsates avada infoakna..

Täpselt samamoodi saate oma markeriga interaktiivsete elamuste loomiseks kasutada markerit ja info Windowsi.

Nüüd on õige hetk korraks teha paus ja vaadata tagasi meie tehtud edusammudele. Ainult 30 koodireas oleme kasutanud Google Mapsi JavaScripti API-t markerite ja infokastidega kohandatud kaardi ehitamiseks. Väärib märkimist, kui lihtne on Google Mapsi API-d kasutada toimingute tegemiseks, mis algajale oleks tundunud väljakutsuv.

Dünaamiline modifitseerimine & sündmuse kuulajad

Markerid ja kaardivalikud pole tingimata põhjused, miks keegi loovutab eelvalmistatud Google Mapsi pistikprogrammi ja lülitub üle API-le. Need on paljulubavad, kuid rohked pistikprogrammid pakuvad neid funktsioone juba praegu. Proovime midagi, mis pole pistikprogrammiga võimalik.

Dünaamiline modifitseerimine

Google Mapsil on palju meetodeid kaardiga suhelda ja selle käitumist muuta. Kui olete harjunud DOM-iga töötama, siis ei tohiks nende meetoditega palju probleeme olla.

Mõned neist meetoditest võimaldavad teil saada teavet kaardilt, näiteks getCenter, mis tagastab kaardi keskmised koordinaadid. Ja samamoodi lubavad mõned teil käitumist muuta, näiteks setCenter, mis muudab kaardi keskpunkti.

Meetodeid on palju ja peaksite neid kõiki tutvuma, nii et teate, mis on API-ga võimalik. Kasutagem ühte neist meetoditest meie kaardil.

Saame oma näitele lisada nupu, mis viib meie kaardi keskpunkti tagasi Londoni linna.

Esiteks peame oma koodile lisama nupu:

<nupu id ="tuuaToCenter">Tooge nupule Center>

Nüüd lisame sündmuse kuulaja oma nupule, mis käivitab setCenteri meetodi:

const centerButton = document.querySelector (‘#bringToCenter’);

centerButton.addEventListener (‘klõps’, funktsioon (e) {
e.preventDefault ();
map.setCenter ({
lat: 51,513329,
lng: -0,08895
});
});

Ja see selleks. Lihtne, eks? Oleme kasutanud map.setCenterit, milles kaart on muutuja, mille alguses kuulutasime oma kaardi hoidmiseks.

Peaksite proovima katsetada erinevaid meetodeid ja uurima API piire.

Ürituse kuulajad

Veel üks kontseptsioon, mis JavaScripti arendajatele võiks tuttav olla, on sündmuste kuulajad. Saate toiminguid konkreetsete sündmuste külge siduda, mis tähendab, et kui mõni sündmus juhtub, näiteks keskuse muutmine, need toimingud käivituvad.

Võtame ühe näite Google Mapsi dokumentidest kaardi koordinaatide saamiseks, kui klõpsate kuskil sellel.

lase infoWindowLatLang;

map.addListener (‘klõps’, funktsioon (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = uus google.maps.InfoWindow ({
positsioon: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (kaart);
});

Nagu näete, on kontseptsioon üsna sarnane sellega, kuidas sündmuste kuulajad JavaScriptis töötavad. Esiteks lisame oma kaardile onClicki sündmuste kuulaja. Oma sündmuse kuulaja kaudu saame koordinaadid selle kohta, kus kasutaja klõpsab ja paneme selle infoaknasse.

Kui kontrollite Google Mapi blokk Otter, näete, kuidas me kasutame neid sündmuste kuulajaid ja meetodeid selliste toimingute tegemiseks nagu lohistamise lisamine & tilk markereid ja eemaldage marker, klõpsates sellel.

Kohandatud juhtelemendi loomine

Ja lõpuks lõpetame selle artikli ehituse näitega kohandatud juhtnupud oma Google Mapsi jaoks.

Nagu varem märgitud, ehitame kohandatud nuppu, mis lisab markeri kaardi keskele. Ehkki selle kood tundub pisut keeruline, on see lihtne.

Esiteks ehitame selle funktsioonina nupu, mille abil sündmuse kuulaja saab kaardi keskele markeri lisada.

Peate ülaltoodud koodiplokis YOUR_API_KEY asendama oma API-võtmega. See muudab lihtsaks Google Mapi, mille keskpunktiks on antud laius- ja pikkuskraadid.

funktsioon MarkerControl (controlDiv, kaart) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2xx tahke #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2 pikslit 6 pikslit rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘kursor’;
controlUI.style.margin = ’10 pikslit’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5 pikslit’;
controlText.title = ‘Klõpsake markeri lisamiseks’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘klõps’, funktsioon () {
uus google.maps.Marker ({
asukoht: map.getCenter (),
kaart: kaart
});
});
}

Enamik ülaltoodud koodist lihtsalt loob elemendi meie nupule. Lõpuks kinnitame sündmuse kuulaja oma nupule, mis lisab markeri kaardi keskele.

Nüüd peame oma kaardi külge kinnitama nupu, mida teeme järgmise koodiga:

const markerControlDiv = document.createElement (‘div’);
const markerControl = uus MarkerControl (markerControlDiv, kaart);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

Ülaltoodud kood seob meie nupu kaardil vasakpoolsesse alumisse ossa. Ja see selleks. See on kõik, mida on vaja kohandatud juhtelementide lisamiseks Google Mapsi JavaScripti API abil.

Google Maps kohandatud nupuga.Google Maps kohandatud nupuga vasakus alanurgas.

Järeldus

Toimiv näide kõigest, mida selles artiklis tegime, on veebis saadaval CodeSandbox.

See on see see artikkel ja ma loodan, et see andis teile kindluse Google Maps JavaScripti API-ga töötamisel. Seda on uskumatult lihtne kasutada ja see võimaldab teil kaardiga ehitada peaaegu kõike, mida soovite!

Nüüd peaksite proovima täna õpitu ära kasutada ja seda harjutama, luues Google Mapsi abil endale demoprojekti. Kui teil on küsimusi, andke sellest kommentaarides teada; vastame neile hea meelega!

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Kujundus ja esitlus Karol K poolt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map