Použití vektorů v Mapách Google

Mapy generované pomocí Google Maps Javascript API Nebudou vždy statické, i když se většinou používají k vizualizaci, není tomu tak vždy, proto někdy nastanou příležitosti, kdy budeme muset rozšířit jejich rozsah, aby v nich mohli zobrazit další informace.
Tyto dodatečné informace, které musíme zahrnout, jsou dosaženy pomocí vektor které nejsou nic jiného než tvary skládající se z bodů, kde všechny typy vektorů používané API Se nazývají překryvy nebo překrytí.
DoporučeníV minulých tutoriálech jsme viděli úvod do API„Zkontrolovali jsme nejdůležitější možnosti a naučili jsme se, jak získat přihlašovací údaje pro vývojáře Google a provádíme několik jednoduchých příkladů jeho použití, proto před přečtením obsahu tohoto tutoriálu nebo provedením zde uvedených příkladů doporučujeme podívat se na tento tutoriál.
Když jsme prošli doporučeným tutoriálem a byli jsme v kontextu, přejdeme k praktickým příkladům, abychom lépe porozuměli používání vektorů v našich mapách generovaných pomocí API.
Použití map generovaných pomocí API nejčastěji se soustřeďuje na webové stránky, kde je jeho hlavní funkcí ukázat umístění společnosti nebo firmy. Můžeme tomu říkat A. bod zájmu že jej můžeme bez problémů reprezentovat typem vektoru, který pro účely Google Maps Javascript API je známý jako popisovač.
Bez dalších okolků se podívejme na kroky, které musíme dodržet při implementaci standardní značky a navíc vlastní značky do naší mapy.
1- První věc, kterou musíme udělat, je zahrnout API a styly pro vizualizaci naší mapy, je důležité si uvědomit, že musíme použít naši Pověření vývojáře Google pro správnou funkci tohoto příkladu:

2- Definujeme naše globální proměnné, takzvanou mapu a řadu proměnných, které použijeme ke generování náhodných značek podle souřadnic, které obklopují oblast Madrid.:

 var mapa; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1; 

3- Poté definujeme inicializační funkci naší mapy, která bude obsahovat nejdůležitější možnosti pro ni jako zoom, základní typ mapy a souřadnice středu což v tomto případě budou ti z Madrid, dostáváme ID div div SLUNCE, inicializujeme mapu a definujeme funkci pro zpracování událostí, když umístíme značky na mapu, podívejme se na segment kódu, který jsme právě popsali:

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

4- Nyní musíme vybudovat naši funkci eventsMarker () který bude mít ve své definici dvě události vázané na kliknutí podle ID, které je stisknuto ze dvou různých odkazů, a které bude volat další dvě funkce, které budou mít na starosti nastavení záložek:

 functionMarkerEvents () {document.getElementById ('add_Marker'). addEventListener ('click', function () {addMarker ();}); document.getElementById ('add_person_Marker'). addEventListener ('click', function () {addPersonMarker ();}); } 

5- Před konstrukcí dvou funkcí, které budou nastavovat značky, je důležité provést nějakou práci na souřadnicích, aby nám poskytly náhodné hodnoty v tomto rozsahu a mohly být interpretovány pomocí Google Maps Javascript API, uděláme to pomocí některých aritmetických operací na globálních proměnných souřadnic, podívejme se na odpovídající funkci:

 funkce createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.random (); var newLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.random (); var newLng = minLng + rndNumLng * deltaLng; vrátit nové google.maps.LatLng (newLat, newLng); } 

6- Jakmile to bude hotové, můžeme vytvořit naše funkce pro opravu značek na naší mapě, proto to uděláme metodou Popisovač Abychom vygenerovali standardní značku a s předchozí funkcí, vygenerujeme náhodnou souřadnici, kde se zobrazí:

 funkce addMarker () {var coordinate = createLgRandom (); var marker = nový google.maps.Marker ({pozice: souřadnice, mapa: mapa, název: 'Náhodný ukazatel -' + markerId}); markerId ++; } 

Než přejdeme k našim vlastní záložka Je důležité zmínit, že je založen na ikonách a ty musí být k dispozici v adresáři našeho projektu, pro toto cvičení byly v kategorii použity některé ikony dostupné zdarma na stránce mapicons markery, takže nám budou fungovat bez problémů, proto si některé stáhneme a umístíme do složky s názvem obr umístěný v kořenovém adresáři našeho projektu, jak můžeme vidět na následujícím obrázku:

ZVĚTŠIT

7- Poté, co máme naše ikony, musíme pouze sestavit naši funkci, proto vytvoříme pole se jmény našich ikon a budeme je spouštět náhodně, což naší metodě poskytne další parametr Popisovač volala ikona který použije stažený obrázek k nastavení značky:

 funkce addPersonMarker () {var markerIcons = ['komiks', 'videohry', 'počítače', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var coordinate = createLaLgRandom (); var marker = nový google.maps.Marker ({pozice: souřadnice, mapa: mapa, ikona: 'img /' + markerIcons [rndMarkerId] + '.png.webp', název: 'Náhodný ukazatel -' + markerId}); markerId ++; } 

8- Nakonec přidáme událost k inicializaci naší mapy a vytvoříme dva odkazy před naším div s ID, která definujeme pro naše události a která budou volat odpovídající funkce:

 google.maps.event.addDomListener (okno, 'načíst', initializeMap); Přidejte záložky
Přidat záložku | Přidat vlastní záložku

Díky tomu už máme naši mapu s možností přidávat standardní značky Y Zvyk Podle toho, co vybereme, je důležité zmínit, že můžeme přidat tolik záložek, kolik chceme, což nám umožní vidět fungování API, na závěr se podívejme, jak to vypadá, když to spustíme v prohlížeči:

ZVĚTŠIT

Ve všech aplikacích, které na webu najdeme a které zobrazují mapu, nevylučují možnost zobrazení informací souvisejících s bodem, na který ukazují, proto máme možnost přidat vyskakovací nebo rozbalovací okno Chcete -li zobrazit informace podle určité polohy na naší mapě nebo dokonce podle značky, podívejme se, jak to můžeme udělat:
1- Vytvoříme nový soubor add_popup.html a použijeme předchozí příklad jako základ pro vložení nových funkcí, za tímto účelem zkopírujeme a vložíme kód naší mapy a funkci vyhledáme initializeMap () kde po získání ID budeme definovat vyskakovací okno pro střed naší mapy pomocí metody InfoWindow, podívejme se na kód pro výše uvedenou funkcionalitu:

 var infowindow = new google.maps.InfoWindow ({content: 'Vyskakovací obsah:
Toto vyskakovací okno ukazuje střed mapy, kterým je Madrid', pozice: new google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (mapa); 

2- Nyní upravíme naši funkci addMarker () Chcete -li přidat vyskakovací okno ke každé značce, která se objeví na naší mapě, použijeme funkci znovu Informační okno () a přidáme událost pro proměnnou, kterou definujeme pomocí instance metody, podívejme se:

 funkce addMarker () {var coordinate = createLgRandom (); var marker = nový google.maps.Marker ({pozice: souřadnice, mapa: mapa, název: 'Náhodný ukazatel -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (značka, 'kliknutí', funkce () {infowindow.open (mapa, značka);}); markerId ++; } 

3- Jakmile to bude hotové, podívejme se, jak vypadá naše mapa s funkčností vyskakovacího okna, které jsme právě zahrnuli:

ZVĚTŠIT

4- Nakonec se podívejme na podobnou funkcionalitu, kterou aplikujeme na naše záložky, provedeme to stisknutím odkazu Přidat záložku:

ZVĚTŠIT

Jak jsme mohli vidět, rozšíření funkčnosti našich map a značek je celkem jednoduché, jen k tomu musíme použít příslušné metody.
Už jsme testovali sílu vektorů zobrazením bodů zájmu na mapě pomocí markeryMůžeme však použít vektory k nakreslení čar a zobrazení trasy mezi dvěma body na naší mapě, podívejme se, jak to děláme:
1- Vytvoříme soubor s názvem add_line.html a zahrneme naše API i styly z prvního příkladu, nyní definujeme souřadnice, které jdou z Madrid na Barcelona, uvidíme:

 var souřadnice Line = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41,3833,2,1833]]; 

2- Než přejdeme k inicializační funkci naší mapy, nejdřív ji vytvoříme addLine () kde první věc, kterou uděláme, je iterace pole souřadnic a vytvoření nového pole, které bude obsahovat objekt typu LatLng, uvidíme:

 funkce addLine () {var pointCount = coordinateLine.length; var linePath = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (coordinateLine [i] [0], coordinateLine [i] [1]); linePath.push (tempLatLng); } 

3- Poté nastavíme vlastnosti pro naši čáru, jako je barva, neprůhlednost a tloušťka. Poté, co to provedeme, stačí odeslat metodu Křivka možnosti jako parametr a nastavte proměnnou křivky na aktuální mapu:

 var lineOptions = {cesta: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0,8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (mapa); } 

4- Nakonec vytvoříme naši dobře známou funkci initializeMap () a místo toho, abychom na jeho konci měli funkci nazvanou MarkerEvents, nahradíme tento řádek názvem naší funkce addLine (), vytvoříme náš HTML a spustíme jej v prohlížeči, měl by vypadat takto:

ZVĚTŠIT

V předchozím příkladu přidáme do naší mapy čáru, a tak předvedeme spojení dvou bodů, abychom demonstrovali trasu mezi nimi. Tento příklad, přestože je ilustrativní, mu stále něco chybí a je to fakt, že ukazuje mobilitu mezi těmito dvěma body , například jedoucí auto.
To může znít docela komplikovaně, ale není tomu tak, s pomocí tříd a metod API Můžeme to vyřešit několika řádky kódu, podívejme se, jak to děláme:
1- První věcí je zahrnout naše API, naše styly a definujeme naše globální proměnné, používáme stejné souřadnice předchozího příkladu pro použití stejné cesty, navíc definujeme proměnnou křivka jako globální, abychom jej mohli používat v plném rozsahu našich Javascript:

 var mapa; var polyline; var souřadnice Line = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41,3833,2,1833]]; 

2- Nyní vytvoříme naši funkci addAnimatedLine () který bude mít podobnou strukturu jako funkce addLine () Z předchozího příkladu však bude mít tato funkce definici symbolu, který použijeme k zobrazení pohybujícího se objektu mezi těmito dvěma body, v tomto případě použijeme šipku:

 var arrowSymbol = {strokeColor: '# 000', scale: 3, path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- Nakonec musíme pouze nastavit tuto proměnnou na možnost ikony z definice řádku:

 var lineOptions = {cesta: linePath, ikony: [{ikona: symbol šipky}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0,8} 

4- Jakmile to bude hotové, stačí animovat naši ikonu a uděláme to ve funkci s názvem animateArrow () které musíme zahrnout na konec definice funkce addAnimatedLine () Podívejme se, co funkce obsahuje:

 funkce animateArrow () {var counter = 0; var accessVar = window.setInterval (funkce () {counter = (counter + 1)% 100; var arrows = polyline.get ('icons'); arrows [0] .offset = (counter / 2) + '%'; polyline.set ('ikony', šipky);}, 50); } 

5- Na závěr inicializujeme naši mapu, jak již víme, a voláme naši funkci addAnimatedLine ()Podívejme se při provádění, jak to vypadá v našem prohlížeči, je důležité zmínit, že šipka má vliv na přesun z bodu do bodu:

ZVĚTŠIT

Tímto posledním příkladem ukončujeme tento tutoriál, protože jsme viděli, že použití vektorů v našich mapách nám umožňuje zvýšit jejich funkčnost a užitečnost, což nám dává možnost implementace bodů zájmu až po alternativní trasy k bodům, které do nich umístíme .Lí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