Google Maps JavaScript API oktatóprogram: Adjon hozzá egyéni térképet webhelyéhez

A Google Maps minden nap segítséget nyújt nekünk az utakon való navigáláshoz és a helyek megtalálásához oly módon, amely alig néhány évtizeddel ezelőtt elképzelhetetlen volt. Ez nemcsak az útmeghatározásban hasznos, hanem számos példát is lát az adatmegjelenítéshez használt térképekre, például azt, hogy az utóbbi időben sok webhely használ térképeket a COVID-19 világszerte elterjedt megjelenítéséhez. Ma tanuljunk meg arról, hogyan használhatjuk a Google Maps JavaScript API-t egyedi térképek készítéséhez webhelyeink és alkalmazásaink számára.


Kíváncsi lehet, miért kellene belemerülnünk a Google Maps JavaScript API-ba, hogy térképeket készítsünk, amikor használhatjuk a Statikus térkép ehelyett, vagy használja a rendelkezésre álló WordPress bővítményeket a kódolás gondja nélkül.

Természetesen mindkettő kiváló lehetőség, ha meg akarja jeleníteni a vállalkozás bizonyos helyét a webhelyén. A Google Maps JavaScript API azonban több ellenőrzést nyújt Önnek azokban az időkben, amikor összetettebb térképet szeretne összeállítani, mint egy előre gyártott plugin kínál..

A Google Maps JavaScript API bemutatója

Ha nem szeretne időt tölteni a kódolásra, és egy egyszerűbb módszert szeretne megjeleníteni a webhelyén lévő térképek megjelenítéséhez, azt javaslom: A Google Maps blokkolja az Ottertől.

A Google Maps JavaScript API kulcs megszerzése

Mielőtt elkezdenénk, először be kell szereznünk egy API-kulcsot a Google Mapshez. Beszerezheti itt. A Google Maps API nem teljesen ingyenes, de jön egy ingyenes csomaggal, amely a legtöbb esetben elegendő.

Megvan az API-kulcsok? Vegye ki a harmadik kijáratot a körforgalomról, és folytassa a bemutatóval. ��

Egyszerű térkép létrehozása

Alapvető Google Maps-példány alapértelmezett beállításokkal.Alapvető Google Maps-példány alapértelmezett beállításokkal.

Először készítsünk egy egyszerű Google Map-t az induláshoz. Noha el lehet választani a JavaScript-et és a CSS-t, ebben az oktatóanyagban egyetlen HTML fájlt használunk. Íme a szerkezet, amelyet használni fogunk:

html>
<html>
<fej>
<cím>Egyszerű Maptitle>
<meta név ="nézetablakban" content ="kezdeti-skála = 1,0">
<meta karakterkészlet ="utf-8">
<stílus>
#map {
magasság: 100%;
}

html, test {
magasság: 100%;
margin: 0;
párnázás: 0;
}
stílus>
fej>
<test>
<div id ="térkép">div>
<forgatókönyv>
had térkép;
initMap () függvény {
térkép = új google.maps.Map (document.getElementById (‘térkép’), {
központ: {
lat: 51,513329,
lng: -0,088950
},
zoom: 14
});
}
forgatókönyv>
<src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&visszahívási = initMap" async halasztás>forgatókönyv>
test>
html>

Amint a Google Maps API betöltődik, meghívja az initMap funkciót, amely inicializálja a térképet. Ha még tovább bontjuk a kódunkat, akkor egy üres divt használunk egy térképazonosítóval, hogy kijelentjük, hol kívánjuk megjeleníteni a térképet..

had térkép;
initMap () függvény {
térkép = új google.maps.Map (document.getElementById (‘térkép’), {
központ: {
lat: 51,513329,
lng: -0,088950
},
zoom: 14
});
}

A JavaScript-ben először egy térképváltozót állítunk be a függvényen kívül, tehát ez része a globális hatókörnek, így később módosíthatjuk a térképet. Az initMap funkciónkban először bejelentünk egy új Google Map-t, és beállíthatjuk megjelenítésre az elem meghívásával a térkép azonosítójával. Ezután meghatározza lehetőségeinket, amelyek a térkép középpontja és a zoom szintje.

London City koordinátáit használjuk, történelmi mérföldkő London közepén, mint térkép központ. Később megvitatjuk, hogyan lehet a Maps API-t használni a térképen szereplő bármely hely koordinátáinak megtalálására. De most, ha kíváncsi vagy, használhatja latlong.net bármilyen cím koordinátáinak gyors megkereséséhez.

Térkép típusok

Most, hogy van alap térképünk, megnézhetjük a testreszabási lehetőségeket, amelyeket a Google Maps JavaScript API nyújt nekünk. Az első lehetőség, amelyet használni fogunk térkép típusa. A Google Maps négy típusú térképet támogat, amelyek a következők:

  • ütemterv: az alapértelmezett térkép, amelyet általában lát.
  • műholdas: a Google Maps és a Google Earth műholdas képe, ha elérhető.
  • hibrid: az útiterv és a műholdas nézet keveréke.
  • terep: a terepinformációkon alapuló térkép, például hegyek és völgyek.

Térkép lehetőségeinkhez hozzáadhatunk egy mapType tulajdonságot a kívánt nézet kiválasztásához, például:

térkép = új google.maps.Map (document.getElementById (‘térkép’), {
központ: {
lat: 51,513329,
lng: -0,08895
},
zoom: 14,
mapTypeId: ‘hibrid’
});

Példánkban hibrid térképet használunk. Kísérletezhet különféle típusokkal, hogy megtudja, melyik felel meg a használati esetnek.

Térkép lehetőségek

A térkép típusa után jönünk térképvezérlők. A Google Maps lehetővé teszi a térképen a hat vezérlőelem bármelyikének használatát. Megtalálhatja a kezelőszervek listáját a saját honlapjukon.

Megadhatja a használni kívánt vezérlőt és szükség esetén annak helyét, például:

térkép = új google.maps.Map (document.getElementById (‘térkép’), {
központ: {
lat: 51,513329,
lng: -0,08895
},
zoom: 14,
mapTypeId: ‘hibrid’,
scaleControl: igaz,
fullscreenControlOptions: {
pozíció: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Engedélyezjük a scaleControl használatát, amely a térkép mélységét mutatja a legalján, a Google szerzői jogaival együtt, igaznak nyilvánítva. És a következő sorban a fullscreenControl megjelenését alapértelmezett jobb felső helyzetéből jobbra lent jobbra állítjuk, a fullscreenControlOptions tulajdonság használatával. Hasonlóképpen módosíthatja a többi kezelőszerv helyzetét.

Szeretne egy vezérlőt, amely a beépített készülékeken kívül más is? Ne aggódjon, a Google Maps lehetővé teszi egyéni vezérlők létrehozását a térképéhez.

Beszéljünk a markerekről!

Jelölő hozzáadása

A jelölők csodálatosak, és lehetővé teszik sok interaktív alkalmazás létrehozását térképpel. Például néhány szállodafoglalási webhely jelölőket használ, hogy megmutassa a szállodák helyét a térképen. És ezeket nagyon könnyű hozzáadni.

Nézzük adj hozzá egy jelölőt a London Bridge-hez a következő kóddal:

hadd marker = new google.maps.Marker ({
pozíció: {
lat: 51,506821,
lng: -0,0879
},
térkép: térkép,
cím: ‘The London Bridge’
});

Mint láthatja fent, a jelölőnk kódjának három tulajdonsága van. Az első a koordináták. Ezután átadjuk a térképváltozót, ahol elején tároltuk térképünket, és végül átadjuk a marker címét.

Az URL-címet továbbíthatja egy egyéni jelölő ikonhoz, egy ikon tulajdonsággal a fenti kódblokkban.

Információs ablak hozzáadása

Találhat valamit, ami hiányzik a jelölőinkről. Általában, amikor rákattint a jelölőre a térképen, megjelenik egy felugró ablak, amelyen további részletek találhatók. Ez a felpattanó önmagában egy másik elem, amelyet an-nak hívnak InfoWindow.

Google Maps egyéni jelölővel.Google Maps egyéni jelölővel.

Nekünk szerencsére nagyon könnyű infóablakot csatolni a jelölőnkhöz.

hadd infoWindow = új google.maps.InfoWindow ({
tartalom: ‘

London-híd


});

marker.addListener (‘kattintás’, function () {
infoWindow.open (térkép, marker);
});

Először hozzunk létre egy új infoWindow változót, amely tárolja az InfoWindow összetevőt. Csak olyan tartalmi tulajdonságot adunk át, amely tartalmazza a kattintással megjelenített HTML-t. Ezután hozzáadunk egy kattintással kapcsolatos eseményfigyelőt a jelölőnkhöz, amely azt mondja, hogy nyissa meg az info ablakot, ha rákattint a jelölőre..

Csakúgy, mint egy marker és egy infoWindow, interaktív élmények létrehozásához a térképen.

Jelenleg a megfelelő pillanat, hogy egy pillanatra szünetet tartsunk, és visszatekintsünk az általunk elért haladásra. Csak 30 sorban használtuk a Google Maps JavaScript API-t egyéni térkép készítéséhez markerekkel és információs mezőkkel. Érdemes megjegyezni, hogy milyen könnyű a Google Maps API-ját használni olyan dolgok elvégzéséhez, amelyek kezdők számára kihívást jelentettek volna.

Dinamikus módosítás & esemény hallgatók

A jelölők és a térképbeállítások nem feltétlenül azok az okok, amelyek miatt valaki eldobhat egy előre készített Google Map-bővítményt és átvált az API-ra. Ígéretesek, de már sok plugin kínál ezeket a funkciókat. Próbáljunk ki valamit, ami egy pluginnal nem lehetséges.

Dinamikus módosítás

A Google Maps rendelkezik sok módszer hogy kölcsönhatásba lépjen a térképpel és módosítsa annak viselkedését. Ha hozzászokott a DOM-hoz dolgozni, akkor nem szabad sok problémát okoznia ezekkel a módszerekkel.

Ezen módszerek némelyike ​​lehetővé teszi az információk beszerzését a térképről, például a getCenter, amely a térkép középső koordinátáit adja vissza. Hasonlóképpen, néhány lehetővé teszi a viselkedés megváltoztatását, például a setCenter, amely megváltoztatja a térkép közepét.

Számos módszer létezik, és mindegyiket át kell nézni, így tudhatja, mi lehetséges az API-val. Használjuk ezen módszerek egyikét a térképünkön.

Felvehetünk egy gombot a példánkhoz, amely visszateszi térképünk központját London városába.

Először hozzá kell adnunk egy gombot a kódunkhoz:

<gomb id ="bringToCenter">Hozd a Center Button-hoz>

Most csatolunk egy eseményfigyelőt a gombhoz, amely aktiválja a setCenter módszert:

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

centerButton.addEventListener (‘kattintás’, (e) függvény {
e.preventDefault ();
map.setCenter ({
lat: 51,513329,
lng: -0,08895
});
});

És ennyi. Egyszerű, igaz? A map.setCenter-et használtuk, amelyben a térkép az a változó, amelyet az elején kijelenttünk, hogy tartja a térképünket.

Meg kell próbálnia kísérletezni különböző módszerekkel, és fel kell tárnia az API határait.

Események hallgatói

Egy másik koncepció, amelyet a JavaScript fejlesztők ismerhetnek, az esemény-hallgatók. Műveleteket csatolhat bizonyos eseményekhez, ami azt jelenti, hogy amikor egy esemény történik, például a központ megváltoztatásakor, ezek a műveletek aktiválódnak.

Vegyük például a Google Maps dokumentumok egyikét, amely szerint megkapjuk a térkép koordinátáit, amikor rákattintunk a térképen.

hadd infoWindowLatLang;

map.addListener (‘kattintás’, funkció (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = új google.maps.InfoWindow ({
pozíció: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (térkép);
});

Mint láthatja, a koncepció nagyjából megegyezik azzal, ahogyan az események hallgatói működnek a JavaScript-ben. Először csatolunk egy onClick eseményfigyelőt térképünkhöz. Az eseményfigyelőn belül megkapjuk a felhasználó kattintásainak koordinátáit, és beillesztjük az InfoWindow-ba.

Ha bejelöli a A Google Map blokkolja Otter, láthatja, hogyan használjuk ezeket az események hallgatóit és módszereit olyan dolgok elvégzésére, mint például a húzás hozzáadása & csepp jelölőket, és kattintással távolítsa el a jelölőt.

Egyéni vezérlő létrehozása

És végül ezt a cikket építési példával fejezzük be egyedi vezérlők a Google Maps szolgáltatáshoz.

Mint korábban megjegyeztük, egy egyedi gombot építünk, amely jelölőt ad a térkép közepéhez. Noha ennek kódja kissé bonyolultnak tűnik, egyszerű.

Először funkcióként egy gombot építünk, amelynek eseményfigyelője hozzákapcsol egy jelölőt a térkép közepéhez.

A fenti kódblokkban a YOUR_API_KEY-t ki kell cserélnie az API-kulcsra. Egy egyszerű Google Map-t állít elő, amelynek középpontjában az adott szélességi és hosszúsági fok van.

funkció MarkerControl (controlDiv, térkép) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2 képpont szilárd #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘mutató’;
controlUI.style.margin = ’10 képpont’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Kattintson Marker hozzáadásához’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘kattintás’, function () {
új google.maps.Marker ({
pozíció: map.getCenter (),
térkép: térkép
});
});
}

A fenti kód nagy része csak elemet hoz létre a gombunkon. A végén csatolunk egy eseményfigyelőt a gombhoz, amely jelölőt ad a térkép közepéhez.

Most meg kell erősítenünk a gombot a térképünkre, amelyet a következő kóddal csinálunk:

const markerControlDiv = document.createElement (‘div’);
const markerControl = új MarkerControl (markerControlDiv, térkép);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

A fenti kód a gombunkat a térképhez bal alsó helyzetéhez kapcsolja. És ennyi. Ez minden, ami ahhoz szükséges, hogy az egyedi vezérlőelemeket hozzáadja a Google Térképhez a JavaScript API használatával.

Google Maps egyéni gombbal.Google Maps egy egyéni gombbal a bal alsó sarokban.

Következtetés

Működő példa mindenre, amit a cikkben tettünk, online elérhető CodeSandbox.

Erre vonatkozik ez a cikk, és remélem, hogy bizalmat adott neked a Google Maps JavaScript API-val való együttműködésben. Hihetetlenül egyszerű a használata, és lehetővé teszi, hogy szinte mindent építsen egy térképpel!

Most meg kell próbálnia felhasználni azt, amit ma megtanult, és gyakorolni kell azzal, hogy a Google Maps segítségével létrehozza magának egy demonstrációs projektet. Ha bármilyen kérdése van, tudassa velünk a megjegyzésekben; örömmel válaszolunk rájuk!

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Elrendezés és előadás: K Karol.

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