Služby Google Maps

Služby nabízené Google Maps Javascript API jsou stejně rozmanité jako funkční, mají kvalitu, která je odlišuje Google mapy Od svých konkurentů tyto služby obecně fungují asynchronně, což umožňuje odeslání požadavku na externí server a zpracování odpovědí má na starosti metoda typu zpětného volání.
Jednou ze silných stránek těchto služeb je, že jsou plně kompatibilní s třídami a objekty API. Můžeme od konzultace adresy konkrétního bodu na naší mapě až po implementaci zobrazení ulice.
Než přejdeme k příkladům, podívejme se na některé z nejdůležitějších služeb, které v tomto kurzu použijeme.
Geo kódováníTato služba nám umožňuje transformovat běžné adresy na zeměpisné souřadnice na základě zeměpisné šířky a délky bodu, což nám umožňuje umístit značky nebo umístit naši mapu, k provádění těchto operací API poskytuje třídu s názvem geokodér ().
Matice vzdálenostiTato služba nám pomáhá vypočítat vzdálenost a délku trasy mezi více body, což je v dnešní době velmi rozšířené, a proto máme za cíl google.maps.DistanceMatrixService a s ním spojené metody.
Street ViewServis Street View nebo Street View nám nabízí 360stupňové panoramatické pohledy v oblastech, kde má pokrytí, něco, díky čemu naše mapy bezpochyby vyniknou.
Pamatujte, že zde jsem podrobně popsal fungování API a zpracování událostí v Mapách Google a Úvod k porozumění API Javascriptu v Mapách Google.
K provedení tohoto příkladu budeme používat službu geokodér () Ale jak jsme zmínili, to nám umožňuje transformovat adresu na souřadnici, to je v pořádku, ale pro běžného uživatele je to něco, co pro to nevidí velké využití, a proto použijeme reverzní geokodér abychom jediným kliknutím získali adresu, kterou potřebujeme. Podívejme se na kroky, které musíme dodržovat:
1- Nejprve, jak již víme, zahrneme API, aniž bychom zapomněli použít naše přihlašovací údaje, a kromě toho zahrneme knihovnu výkres což nám umožní implementovat funkčnost kreslicích značek, spojíme tuto knihovnu do našeho pověření se symbolem &, jak uvidíme níže:

2- Nesmíme zapomenout na styly pro mapu, které jí poskytnou typ vizualizace na stránce, a také definování globálních proměnných, které budou mít globální rozsah ve všech metodách našeho kódu:

 var mapa; var geokodér var vyskakovací okno; 

3- Poté definujeme naši metodu initializeMap () kde první věc, kterou uděláme, je deklarovat náš objekt typu geokodér pomáhá nám ze třídy Geokodér () a s Informační okno objekt pro vyskakovací okno, které zobrazí adresu na obrazovce:

 funkce initializeMap () {geocoder = new google.maps.Geocoder (); vyskakovací okno = nové google.maps.InfoWindow (); 

4- Zahrneme konvenční možnosti mapy, jako je střed, zoom a typ základny, získáme prvek SLUNCE a vytvoříme instanci metody Mapa:

 google.maps.visualRefresh = true; var mapOptions = {střed: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); mapa = nový google.maps.Map (mapElement, mapOptions); 

5- Nyní vytvoříme správce výkresů, který nám umožní kreslit značky, a proto vytvoříme instanci DrawingManager, zviditelníme jej v uživatelském rozhraní a vybereme, které režimy se budou zobrazovat v ovládacím prvku a na jaké pozici budou:

 var drawingManager = nový google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}})); 

6- Nyní aktivujeme nově vytvořenou funkcionalitu, přidáme posluchače pro naši událost a pro její provedení reverzní geokodér metodou získáme polohu v zeměpisné šířce a délce naší značky getPosition ():

 drawingManager.setMap (mapa); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 

7- Aby bylo možné dokončit reverzní geokodér použijeme službu geokód () a uděláme podmíněné ověření, že služba vrací platnou odpověď, pokud ne, zpracováme ji tak, aby uživatel věděl, že selhala, a pokud je výsledek správný, zavoláme naši metodu Zobrazit adresu ():

 geocoder.geocode ({'latLng': markerPosition}, funkce (výsledky, stav) {if (status == google.maps.GeocoderStatus.OK) {if (results) {ShowAddress (results [0], marker);}} else {alert ("Služba se nezdařila:" + stav);}}); 

8- Nakonec musíme vytvořit pouze metodu Zobrazit adresu () který obdrží výsledek našeho reverzního geokodéru a polohu značky, s tím můžeme vytvořit střed a bez problémů zobrazit informace o formátované adrese:

 funkce ShowAddress (výsledek, značka) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adresa:  '+ result.formatted_address; popup.setContent (popupContent); popup.open (mapa, značka); } 

9- Zavřeme odpovídající značky a přidáme část HTML kódu, abychom dokončili náš příklad:

 Najděte adresu na mapě jedním kliknutím

10- Spustíme v prohlížeči a klikneme na libovolný bod na naší mapě a získáme adresu zobrazenou ve vyskakovacím okně, které deklarujeme, mělo by vypadat následovně:

ZVĚTŠIT

Tuto funkcionalitu lze aplikovat na jakýkoli bod na naší mapě, musíme se přes něj pouze přesunout a vybrat jiný bod.
The Google Maps Javascript API nám poskytuje docela užitečné služby, jednou z nich je matice vzdálenosti což nám umožňuje vypočítat vzdálenost a čas mezi více body, což je funkce, kterou můžeme použít k implementaci různých řešení v jakémkoli podnikání, od výpočtu dodacích lhůt nebo stanovení nejoptimálnější trasy mezi různými body. Podívejme se na kroky, které musíme provést, abychom tuto funkci implementovali mezi naše mapy.
1- Zahrnujeme naše API společně s knihovnou výkres, stejně jako styly pro zobrazení naší mapy a kontejneru naší matice:

2- Definujeme globální proměnné pro použití v celém rozsahu našeho kódu a ve funkci initializeMap () Inicializujeme pole, abychom zvládli zeměpisnou šířku a délku původu i cíle:

 var mapa; var originLatLon; var destinationLatLon; var vzdálenostMatrixService; var markerCount; var arrayResult; funkce initializeMap () {originLatLon = []; destinationLatLon = []; 

3- Potom ve stejné funkci získáme tlačítko a obslužný program událostí, navíc inicializujeme objekt pro službu DistanceMatrixService stejně jako čítač pro značky a přiřadit výsledek pole kontejneru div:

 var generateBtnMatrix = document.getElementById ('generateMatrix'); generateBtnMatrix.addEventListener ('kliknutí', funkce () {MatrixRequest ();}); distanceMatrixService = nové google.maps.DistanceMatrixService (); markerCount = 0; pole výsledků = document.getElementById ('pole výsledků'); 

4- Zahrneme konvenční možnosti mapy, jako je střed, zoom a typ základny, získáme prvek SLUNCE a vytvoříme instanci metody Mapa:

 google.maps.visualRefresh = true; var mapOptions = {střed: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); mapa = nový google.maps.Map (mapElement, mapOptions); 

5- Stejně jako v předchozím cvičení jsme vytvořili správce kreslení, který nám umožní kreslit značky, proto vytvoříme instanci DrawingManager a poskytujeme potřebné možnosti, povolujeme je a přidáváme posluchače pro událost:

 var drawingManager = nový google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}})); drawingManager.setMap (mapa); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 

6- Poté provedeme ověření, abychom omezili počet povolených cílů a nastavili ikony, které budeme používat pro naše záložky:

 markerCount ++; if (markerCount> 10) {alert ("No next addresses allowed"); drawingManager.setMap (null); marker.setMap (null); vrátit se; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 

7- Nyní musíme pouze vytvořit naše funkce, abychom zvládli požadavky vznesené do služby vzdálenostMatrixServiceNejprve vytvoříme ten, který připraví vlastnost požadavku:

 functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({původy: LatinSource, destinace: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 

8- Vytváříme funkci zpětného volání, která nám umožní získat odezvu služby a do které zahrneme potřebná ověření v případě, že služba nedokáže chybu zpracovat nejlepším způsobem:

 funkce getResultMatrix (výsledek, stav) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = result.destinationAddresses; for (var i = 0, l = originAddresses.length; i <l; i ++) {var elements = result.rows [i] .elements; for (var j = 0, m = elements.length; j <m; j ++) {var originAddress = originAddresses [i]; var destinationAddress = destinationAddresses [j]; var element = elements [j]; var vzdálenost = element.distance.text; var duration = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, distance, duration, i, j); }}} else {alert ('Nelze získat pole:' + stav); } 

9- Navíc vytvoříme funkci, která zapíše výsledky získané v odpovídajícím div:

 functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount) {var existingContent = resultResult.innerHTML; var newContent; newContent = 'Původ ' + countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; newContent + = 'Cíl ' + countLetters (destinationAddressCount) +':
'; newContent + = destinationAddress + '
'; newContent + = 'Osud:  ' + vzdálenost +'
'; newContent + = 'Osud:  ' + doba trvání +'
'; newContent + = '
'; resultArray.innerHTML = existingContent + newContent; } 

9- Nakonec v našem Javascript Počitadla zpracováváme funkcí, která vrací název odpovídající počitadlu značky, kterou umisťujeme:

 funkce countLetters (count) {switch (count) {case 0: return 'Comics Store'; případ 1: vrátit 'Obchod s videohrami'; případ 2: vrátit 'Comics Store'; případ 3: vrátit 'Comics Store'; případ 4: vrátit 'Video Game Store'; výchozí: return null; }} 

10- Zavřeme odpovídající značky a přidáme část kódu HTML abychom dokončili náš příklad:

Použijte matici vzdálenosti

11- Provedeme náš příklad v prohlížeči a pro vizualizaci provozu naší mapy umístíme 4 body zájmu a stiskneme tlačítko Vygenerujte matici vzdálenosti:

ZVĚTŠIT

Jak vidíme na našem obrázku, máme na mapě čtyři body, kde je matice vzdálenosti umožňuje vypočítat vzdálenost a čas mezi každým z nich.
K dokončení tohoto kurzu implementujeme službu Street View„Je to docela jednoduchý příklad, ale když se přidá k dalším dostupným službám, naše mapy vyniknou nad ostatními, podívejme se, co musíme pro implementaci této služby udělat:
1- Zahrneme API a definujeme odpovídající styly, v tomto případě nebudeme používat knihovnu výkresů, takže nebude zahrnuta:

2- Definujeme naše globální proměnné a vytvoříme naši funkci initializeMap () S konvenčními možnostmi, středem naší mapy, přiblížením a typem základny získáme prvek SLUNCE a vytvoříme instanci metody Mapa:

 var mapa; var geokodér; var streetView; funkce initializeMap () {popup = nové google.maps.InfoWindow (); geokodér = nový google.maps.Geocoder (); google.maps.visualRefresh = true; var mapOptions = {střed: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); mapa = nový google.maps.Map (mapElement, mapOptions); 

3- V rámci naší funkce nazýváme službu Street View a poté vytvoříme funkci pro nastavení jejích možností, jako je umístění a úhel pohledu:

 streetView = mapa.getStreetView (); } funkce setOptionsStreetView (umístění) {streetView.setPosition (umístění); streetView.setPov ({záhlaví: 0, svědění: 10}); } 

4- Nakonec vytvoříme funkce, které umožní přepínat mezi konvenčním zobrazením mapy a Pohled do ulice, pojďme se podívat, jak vypadají tyto:

 funkce showMap () {streetView.setVisible (false); } funkce showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (true); } 

5- Zavřeme odpovídající značky a přidáme část kódu HTML abychom dokončili náš příklad:

Mapa s funkcí Street View

6- Spustíme náš příklad v prohlížeči a stiskneme tlačítko Zobrazit Street View vizualizovat funkčnost, jak můžeme vidět na následujícím obrázku:

ZVĚTŠIT

Pokud se chceme vrátit do výchozího zobrazení naší mapy, stačí stisknout tlačítko Zobrazit mapu.
Tímto tento tutoriál ukončujeme, protože jsme dokázali ocenit služby přítomné v Google Maps Javascript API Umožňují nám mnohem více rozšířit funkčnost našich map a umisťovat ji jako možnost, kterou je možné v systémech, které implementujeme, zohlednit při výpočtu polohy a času a / nebo vzdálenosti.
Připomínám vám tento návod, který vám také přijde vhod: Naučte se používat vektory v Mapách GoogleLíbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod