Google Maps JavaScript -sovellusliittymän opetusohjelma: Lisää mukautettu kartta verkkosivustollesi

Google Maps JavaScript -sovellusliittymän opetusohjelma: Lisää mukautettu kartta verkkosivustollesi

Google Maps JavaScript -sovellusliittymän opetusohjelma: Lisää mukautettu kartta verkkosivustollesi
СОДЕРЖАНИЕ
02 июня 2020

Google Maps auttaa meitä päivittäin liikkumaan tiellämme ja löytämään paikkoja tavalla, joka oli vain muutama vuosikymmen sitten käsittämätön. Se ei ole vain hyödyllinen suunnanmäärityksessä, vaan näemme myös monia esimerkkejä tietojen visualisointiin käytetyistä karttoista, kuten kuinka viime aikoina monet verkkosivustot käyttävät karttoja COVID-19: n leviämisen visuaaliseksi kuvaamiseksi ympäri maailmaa. Opi tänään, kuinka voimme käyttää Google Maps JavaScript -sovellusliittymää rakentaaksemme mukautettuja karttoja verkkosivustoillemme ja sovelluksillemme.


Saatat ihmetellä, miksi meidän pitäisi kaivaa Google Maps JavaScript -sovellusliittymään rakentaaksesi karttoja, kun voimme käyttää a Staattinen kartta sen sijaan, tai käytä yhtä käytettävissä olevista WordPress-laajennuksista tehdäksesi sen ilman vaivaa koodauksessa.

Tietenkin, molemmat ovat erinomaisia ​​vaihtoehtoja, kun haluat näyttää jonkin yrityksen sijainnin verkkosivustollasi. Mutta Google Maps JavaScript -sovellusliittymä tarjoaa sinulle paremman hallinnan aikoina, jolloin haluat rakentaa mukautetun kartan monimutkaisemmalle kuin esivalmistetun laajennuksen on tarjottava.

Google Maps JavaScript -sovellusliittymän opetusohjelma

Jos et halua viettää aikaa koodaamiseen ja haluat selkeämmän tavan näyttää karttoja verkkosivustollasi, suosittelen Google Maps estää Otterista.

Google Maps JavaScript -sovellusliittymän avaimen hankkiminen

Ennen aloittamista meidän on ensin hankittava sovellusliittymäavain Google Mapsiin. Voit saada sen tässä. Google Maps -sovellusliittymä ei ole täysin ilmainen, mutta sen mukana tulee ilmainen suunnitelma, joka riittää useimpiin tapauksiin.

Onko sinulla API-avaimia? Valitse kolmas poistuminen liikenneympyrältä ja jatka opetusohjelmaa. ��

Yksinkertaisen kartan luominen

Perusasetuksena oleva Google Maps -ilmentymä.Perusasetuksena oleva Google Maps -ilmentymä.

Ensin rakennetaan yksinkertainen Google Map aloittaaksesi. Vaikka voit erottaa JavaScriptin ja CSS: n, käytämme tässä opetusohjelmassa yhtä HTML-tiedostoa. Tässä on rakenne, jota aiomme käyttää:

html>
<html>
<pää>
<otsikko>Yksinkertainen nimike>
<meta nimi ="viewport" content ="ensimmäinen mittakaavan = 1,0">
<metamerkkijono ="UTF-8">
<tyyli>
#map {
korkeus: 100%;
}

html, runko {
korkeus: 100%;
marginaali: 0;
täyte: 0;
}
tyyli>
pää>
<ruumis>
<div id ="kartta">div>
<käsikirjoitus>
anna kartta;
toiminto initMap () {
kartta = uusi google.maps.Map (document.getElementById (‘map’), {
keskusta: {
lat: 51,513329,
lng: -0,088950
},
zoom: 14
});
}
käsikirjoitus>
<skripti src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&soittopyynnön = initMap" async-lykkäys>käsikirjoitus>
ruumis>
html>

Kun Google Maps -sovellusliittymä latautuu, se kutsuu initMap-toiminnon, joka alustaa kartan. Jos hajotamme koodimme entisestään, käytämme tyhjää jakoa, jossa on karttatunnus, ilmoittaaksemme mihin haluamme kartan.

anna kartta;
toiminto initMap () {
kartta = uusi google.maps.Map (document.getElementById (‘map’), {
keskusta: {
lat: 51,513329,
lng: -0,088950
},
zoom: 14
});
}

Asetamme JavaScriptiin ensin karttamuuttujan funktion ulkopuolelle, joten se on osa maailmanlaajuista laajuutta, jotta voimme muokata karttaa myöhemmin. InitMap-toiminnassamme ilmoitamme ensin uuden Google Mapin ja asetamme sen renderoimaan kutsumalla elementin karttatunnuksella. Sen jälkeen määrittelemme vaihtoehtomme, jotka ovat kartan keskusta ja zoomaustaso.

Käytämme Lontoon City-koordinaatteja, historiallinen maamerkki Lontoon keskustassa, karttakeskuksena. Myöhemmin keskustellaan siitä, kuinka Maps API -sovelluksen avulla voit löytää minkä tahansa kartan sijainnin koordinaatit. Mutta nyt, jos olet utelias, voit käyttää latlong.net löytääksesi minkä tahansa osoitteen koordinaatit nopeasti.

Karttatyypit

Nyt kun meillä on peruskartta, voimme tarkastella mukautusvaihtoehtoja, jotka Google Maps JavaScript -sovellusliittymä antaa meille. Ensimmäinen vaihtoehto, jota aiomme käyttää, on karttatyyppi. Google Maps tukee neljän tyyppisiä karttoja, jotka ovat:

  • tiekartta: oletuskartta, jonka yleensä näet.
  • satelliitti: satelliittinäkymä Google Mapsista ja Google Earthista, jos käytettävissä.
  • hybridi: sekoitus tiekarttaa ja satelliittinäkymää.
  • maasto: kartta, joka perustuu maastotietoihin, kuten vuoret ja laaksot.

Karttavaihtoehtoihimme voimme lisätä mapType -ominaisuuden valitaksesi haluamasi näkymän, kuten tämä:

kartta = uusi google.maps.Map (document.getElementById (‘map’), {
keskusta: {
lat: 51,513329,
lng: -0,08895
},
zoom: 14,
mapTypeId: ‘hybridi’
});

Esimerkissämme käytämme hybridi-karttaa. Voit kokeilla erilaisia ​​tyyppejä nähdäksesi mikä sopii käyttökohteeseesi.

Karttavaihtoehdot

Karttatyypin jälkeen tulemme karttaohjaimet. Google Maps antaa sinun käyttää mitä tahansa sen kuudesta ohjaimesta karttoissasi. Löydät luettelon säätimistä heidän verkkosivuillaan.

Voit määrittää tarvittavan säätimen ja sen sijainnin, esimerkiksi:

kartta = uusi google.maps.Map (document.getElementById (‘map’), {
keskusta: {
lat: 51,513329,
lng: -0,08895
},
zoom: 14,
mapTypeId: ‘hybridi’,
scaleControl: totta,
fullscreenControlOptions: {
sijainti: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Aktivoimme scaleControlin, joka näyttää kartan mittakaavan aivan alaosassa Googlen tekijänoikeuksien rinnalla julistamalla sen TOSSI. Ja seuraavalla rivillä muutamme fullscreenControlin ulkonäön oletusarvoisesta oikealta ylhäältä oikealta alareunaan käyttämällä fullscreenControlOptions-ominaisuutta. Samoin voit säätää muiden säätimien sijaintia.

Haluatko ohjaimen, joka tekee jotain muuta kuin sisäänrakennettua? Älä huoli, Google Maps antaa sinun luoda myös mukautettuja säätimiä kartallesi.

Puhutaanko merkkeistä!

Merkinnän lisääminen

Markerit ovat uskomattomia, ja niiden avulla on mahdollista rakentaa paljon interaktiivisia sovelluksia kartalla. Esimerkiksi jotkut hotellivarausverkkosivustot käyttävät merkkejä osoittamaanksesi hotellien sijainnin kartalla. Ja niitä on myös erittäin helppo lisätä.

Katsotaanpa lisää merkki Lontoon siltaan seuraavalla koodilla:

anna merkki = uusi google.maps.Marker ({
asema: {
lat: 51,506821,
lng: -0,0879
},
kartta: kartta,
otsikko: ‘Lontoon silta’
});

Kuten yllä näet, merkitsemme koodilla on kolme ominaisuutta. Ensimmäinen niistä on koordinaatit. Sen jälkeen siirrymme karttamuuttujaan, johon alussa varastoimme karttamme, ja lopulta ohitamme merkin otsikon.

Voit myös välittää URL-osoitteen mukautetulle merkkikuvakkeelle, jolla on kuvakeominaisuus yllä olevassa koodilohossa.

Tietoikkunan lisääminen

Saatat löytää jotain puuttuvaa merkkeistämme. Yleensä, kun napsautat merkkiä kartalla, se näyttää ponnahdusikkunan, jossa on lisätietoja. Tämä ponnahdusikkuna on sinänsä erilainen komponentti, jota kutsutaan an InfoWindow.

Google Maps mukautetulla merkinnällä.Google Maps mukautetulla merkinnällä.

Meille onneksi on erittäin helppo kiinnittää tietoikkuna merkkiimme.

anna infoWindow = uusi google.maps.InfoWindow ({
sisältö: ‘

Lontoon silta


});

marker.addListener (‘napsauta’, toiminto () {
infoWindow.open (kartta, merkki);
});

Ensin luomme uuden infoWindow-muuttujan, joka tallentaa InfoWindow-komponentimme. Välitämme sille vain sellaisen sisällön ominaisuuden, joka sisältää HTML: n, jonka se näyttää napsautuksen jälkeen. Sen jälkeen lisäämme napsautustapahtuman kuuntelijan merkkiimme, joka kehottaa sen avaamaan infoWindow napsauttamalla merkkiä..

Aivan kuten voit käyttää merkitsintä ja infoLowa luoda interaktiivisia kokemuksia kartallasi.

Nyt on oikea hetki pysähtyä hetkeksi ja katsoa taaksepäin saavuttamaamme edistykseen. Vain 30 koodirivillä olemme käyttäneet Google Maps JavaScript -sovellusliittymää rakentaaksesi mukautetun kartan, jossa on merkinnät ja tietokentät. On syytä huomata, kuinka helppoa on käyttää Google Mapsin sovellusliittymää tehdä asioita, jotka olisivat olleet haastavia aloittelijalle.

Dynaaminen muokkaus & tapahtuman kuuntelijat

Markerit ja karttavaihtoehdot eivät välttämättä ole syitä, miksi kukaan ohittaisi valmiiksi tehdyn Google Map -laajennuksen ja siirtyisi API: hon. Ne ovat lupaavia, mutta runsaat laajennukset tarjoavat nämä ominaisuudet jo. Kokeillaan jotain, mikä ei ole mahdollista laajennuksen avulla.

Dynaaminen muokkaus

Google Mapsilla on monia menetelmiä olla vuorovaikutuksessa kartan kanssa ja muokata sen käyttäytymistä. Jos olet tottunut työskentelemään DOM: n kanssa, sinun ei pitäisi olla paljon ongelmia näiden menetelmien kanssa.

Joidenkin näiden menetelmien avulla voit saada tietoja kartalta, kuten getCenter, joka palauttaa kartan keskikoordinaatit. Ja samoin, jotkut antavat sinun muuttaa käyttäytymistä, kuten setCenter, joka muuttaa kartan keskustaa.

Menetelmiä on monia, ja sinun tulisi tarkastella kaikkia niitä, jotta tiedät, mikä on mahdollista sovellusliittymän avulla. Käytämme yhtä näistä menetelmistä karttamme kanssa.

Voimme lisätä esimerkkiimme painikkeen, joka tuo karttamme keskustaan ​​takaisin Lontoon kaupunkiin.

Ensinnäkin meidän on lisättävä painike koodiin:

<painikkeen id ="bringToCenter">Tuo keskipainikkeeseen>

Nyt liitämme tapahtuman kuuntelijan painikkeeseemme, joka laukaisee setCenter-menetelmän:

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

centerButton.addEventListener (‘napsauta’, toiminto (e) {
e.preventDefault ();
map.setCenter ({
lat: 51,513329,
lng: -0,08895
});
});

Ja siinä se on. Yksinkertainen, eikö totta? Olemme käyttäneet map.setCenteriä, jossa kartta on muuttuja, jonka alussa ilmoitimme pitävän karttamme.

Sinun tulisi yrittää kokeilla erilaisia ​​menetelmiä ja tutkia sovellusliittymän rajoja.

Tapahtuman kuuntelijat

Toinen konsepti, jonka JavaScript-kehittäjät saattavat tuntea, on tapahtumien kuuntelijat. Voit liittää toiminnot tiettyihin tapahtumiin, mikä tarkoittaa, että kun tapahtuma tapahtuu, kuten esimerkiksi keskuksen muutos, nämä toimet laukaistavat.

Otetaan yksi esimerkki Google Maps -dokumenteista kartan koordinaattien saamisesta, kun napsautat mitä tahansa sen kohtaa.

anna infoWindowLatLang;

map.addListener (‘napsauta’, toiminto (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = uusi google.maps.InfoWindow ({
sijainti: mapsMouseEvent.latLng
});

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

Kuten huomaat, konsepti on melko sama kuin miten tapahtumien kuuntelijat toimivat JavaScriptissa. Ensin liitämme onClick-tapahtuman kuuntelijan karttamme. Tapahtumakuuntelijamme sisällä saamme koordinaatit siitä, missä käyttäjä napsauttaa, ja laita se InfoWindow-kohtaan.

Jos tarkistat Google Map -lohko kirjoittanut Otter, voit nähdä, kuinka käytämme näitä tapahtumaluokkailijoita ja -menetelmiä muun muassa lisäämällä vetämällä & pudota merkkejä ja poista merkki napsauttamalla sitä.

Muokatun ohjaimen luominen

Ja lopuksi, lopetamme tämän artikkelin esimerkillä rakentamisesta mukautetut säätimet Google Maps -sovelluksellesi.

Kuten aiemmin todettiin, rakennamme mukautettua painiketta, joka lisää merkinnän kartan keskelle. Vaikka tämän koodi näyttää hieman monimutkaiselta, se on yksinkertainen.

Ensin rakennamme painikkeena sen toiminnon, jonka avulla tapahtuman kuuntelija voi lisätä merkinnän kartan keskelle.

YOUR_API_KEY yllä olevassa koodilohossa on korvattava API-avaimella. Se tarjoaa yksinkertaisen Google-kartan, jonka keskipisteenä on annettu leveys- ja pituusaste.

toiminto MarkerControl (controlDiv, kartta) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px kiinteä #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘osoitin’;
controlUI.style.margin = ’10 pikseliä’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Napsauta lisätäksesi merkinnän’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘napsauta’, toiminto () {
uusi google.maps.Marker ({
sijainti: map.getCenter (),
kartta: kartta
});
});
}

Suurin osa yllä olevasta koodista luo vain elementin painikkeellemme. Loppujen lopuksi kiinnitämme tapahtuman kuuntelijan painikkeeseemme, joka lisää merkinnän kartan keskelle.

Nyt meidän on kiinnitettävä painikkeemme karttamme, jonka teemme seuraavalla koodilla:

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

Yllä oleva koodi kiinnittää painikkeemme karttaan vasempaan alakulmaan. Ja siinä se on. Se on kaikki, mitä tarvitaan mukautettujen säätimien lisäämiseen Google Mapsiin JavaScript-sovellusliittymän avulla.

Google Maps mukautetulla painikkeella.Google Maps mukautetulla painikkeella vasemmassa alakulmassa.

johtopäätös

Toimiva esimerkki kaikesta, mitä teimme tässä artikkelissa, on saatavana verkossa CodeSandbox.

Se on tämä artikkeli, ja toivon, että se antoi sinulle varmuutta työskennellä Google Maps JavaScript -sovellusliittymän kanssa. Sitä on uskomattoman suoraviivainen ja antaa sinun rakentaa kartalla melko paljon mitä haluat!

Nyt sinun pitäisi yrittää käyttää tänään opittua ja harjoittaa sitä rakentamalla itsellesi esittelyprojekti Google Mapsin avulla. Kerro meille kommenteissa, jos sinulla on kysyttävää; vastaamme mielellämme heihin!

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

Suunnittelu ja esitys Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector