Gebruik van vectoren in Google Maps

De kaarten gegenereerd met de Google Maps Javascript-API Ze zullen niet altijd statisch zijn, hoewel ze meestal worden gebruikt voor visualisatie, is dit niet altijd het geval, daarom zullen er soms gelegenheden zijn dat we hun reikwijdte moeten uitbreiden, zodat ze er aanvullende informatie in kunnen weergeven.
Deze aanvullende informatie die we moeten opnemen, wordt bereikt met de vector die niets meer zijn dan vormen bestaande uit punten, waar alle soorten vectoren die worden gebruikt door de API Ze worden genoemd overlays of overlappen.
AanbevelingIn eerdere tutorials zagen we de inleiding tot API, we hebben de belangrijkste opties bekeken, we hebben geleerd hoe we de inloggegevens voor ontwikkelaars van . kunnen verkrijgen Google en we voeren enkele eenvoudige voorbeelden uit van het gebruik ervan, daarom raden we aan om deze tutorial te bekijken voordat u de inhoud van deze tutorial leest of de hier genoemde voorbeelden doet.
Nadat we de aanbevolen tutorial hebben doorgenomen en in context zijn, gaan we verder met de praktische voorbeelden, dit voor een beter begrip van het gebruik van vectoren in onze kaarten die met de API zijn gegenereerd.
Het gebruik van de kaarten gegenereerd met de API het is meestal geconcentreerd op websites waar het de belangrijkste functie is om de locatie van een bedrijf of bedrijf te tonen. We kunnen dit een noemen punt van belang dat we het zonder enig probleem kunnen weergeven met een type vector, dat voor de doeleinden van de Google Maps Javascript-API staat bekend als markeerstift.
Laten we zonder verder oponthoud de stappen bekijken die we moeten volgen om een ​​standaardmarkering en bovendien een aangepaste op onze kaart te implementeren.
1- Het eerste wat we moeten doen is de API en de stijlen voor de visualisatie van onze kaart, is het belangrijk op te merken dat we onze Google-ontwikkelaarsreferentie voor de juiste werking van dit voorbeeld:

2- We definiëren onze globale variabelen, een zogenaamde kaart en een reeks variabelen die we zullen gebruiken om willekeurige markeringen te genereren op basis van coördinaten die het gebied van Madrid.:

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

3- Vervolgens definiëren we de initialisatiefunctie van onze kaart, die de belangrijkste opties ervoor zal bevatten als: zoom, basistype voor kaart en centrumcoördinaten wat in dit geval die van zal zijn Madrid, we krijgen de ID kaart van de div door de ZON, we initialiseren de kaart en definiëren een functie om de gebeurtenissen af ​​te handelen wanneer we de markeringen op de kaart plaatsen, laten we eens kijken naar het codesegment dat we zojuist hebben beschreven:

 functie initializeMap () {google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); kaart = nieuwe google.maps.Map (mapElement, mapOptions); evenementenMarker (); } 

4- Nu moeten we onze functie bouwen evenementenMarker () die in zijn definitie twee gebeurtenissen per klik heeft volgens de ID die wordt ingedrukt vanuit twee verschillende links en die nog twee functies aanroept die verantwoordelijk zijn voor het instellen van de bladwijzers:

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

5- Voordat de twee functies worden geconstrueerd die de markeringen zullen instellen, is het belangrijk om wat werk aan de coördinaten te doen, zodat ze ons willekeurige waarden in dat bereik geven en ze kunnen worden geïnterpreteerd door de Google Maps Javascript-API, we zullen dit doen met enkele rekenkundige bewerkingen op de globale variabelen van de coördinaten, laten we de bijbehorende functie bekijken:

 functie createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.willekeurig (); var newLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.willekeurig (); var newLng = minLng + rndNumLng * deltaLng; retourneer nieuwe google.maps.LatLng (newLat, newLng); } 

6- Zodra dit is gebeurd, kunnen we onze functies bouwen om de markeringen op onze kaart te bevestigen, hiervoor doen we het met de methode Markeerstift Om een ​​standaardmarkering te genereren en met de vorige functie genereren we de willekeurige coördinaat waar deze zal worden weergegeven:

 functie addMarker () {var coördinaat = createLgRandom (); var marker = nieuwe google.maps.Marker ({positie: coördinaat, kaart: kaart, titel: 'Random Marker -' + markerId}); markerId ++; } 

Voordat we verder gaan met onze aangepaste bladwijzer Het is belangrijk om te vermelden dat het gebaseerd is op pictogrammen en deze moeten beschikbaar zijn in de directory van ons project, voor deze oefening werden enkele van de gratis pictogrammen die beschikbaar zijn op de mapicons-pagina gebruikt onder de categorie markeringen, dus ze zullen probleemloos voor ons werken, hiervoor downloaden we er een paar en plaatsen ze in een map met de naam img bevindt zich aan de basis van ons project, zoals we kunnen zien in de volgende afbeelding:

VERGROTEN

7- Nadat we onze pictogrammen hebben, hoeven we alleen onze functie te bouwen, hiervoor maken we een array met de namen van onze pictogrammen en we gaan ze willekeurig uitvoeren, waardoor een extra parameter aan onze methode wordt gegeven Markeerstift genaamd icoon die de gedownloade afbeelding zal gebruiken om de markering in te stellen:

 function addPersonMarker () {var markerIcons = ['strips', 'videogames', 'computers', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var coördinaat = createLaLgRandom (); var marker = nieuwe google.maps.Marker ({positie: coördinaat, kaart: kaart, pictogram: 'img /' + markerIcons [rndMarkerId] + '.png.webp', titel: 'Random Marker -' + markerId}); markerId ++; } 

8- Ten slotte voegen we het evenement toe om onze kaart te initialiseren en maken we twee links voor onze div met de ID's die we definiëren voor onze evenementen die de bijbehorende functies zullen aanroepen:

 google.maps.event.addDomListener (venster, 'laden', initializeMap); Bladwijzers toevoegen
Bladwijzer toevoegen | Aangepaste bladwijzer toevoegen

Hiermee hebben we al onze kaart met de functionaliteit om toe te kunnen voegen standaard markeringen Y Op maat Afhankelijk van wat we selecteren, is het belangrijk om te vermelden dat we zoveel bladwijzers kunnen toevoegen als we willen, dit zal ons in staat stellen om de werking van de API te zien, om af te sluiten, laten we eens kijken hoe het eruit ziet wanneer we het in onze browser uitvoeren:

VERGROTEN

In alle toepassingen die we op internet vinden die een kaart weergeven, sluiten ze de mogelijkheid niet uit om informatie te tonen met betrekking tot het punt waarnaar ze verwijzen, daarom hebben we de mogelijkheid om een ​​pop-up- of vervolgkeuzevenster toe te voegen om informatie weer te geven volgens een bepaalde positie op onze kaart of zelfs een markering, laten we eens kijken hoe we dit kunnen doen:
1- We gaan een nieuw bestand maken add_popup.html en we zullen het vorige voorbeeld gebruiken als basis om de nieuwe functionaliteiten in te voegen, hiervoor kopiëren en plakken we de code van onze kaart en gaan we de functie lokaliseren initializeMap () waar we na het verkrijgen van de ID de pop-up voor het midden van onze kaart gaan definiëren met de InfoWindow-methode, laten we de code voor de bovengenoemde functionaliteit bekijken:

 var infowindow = nieuw google.maps.InfoWindow ({inhoud: 'Pop-upinhoud:
Deze pop-up toont het midden van de kaart, dat is Madrid', positie: nieuw google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (kaart); 

2- Nu gaan we onze functie wijzigen addMarker () om een ​​pop-up toe te voegen aan elke markering die op onze kaart verschijnt, hiervoor zullen we de functie opnieuw gebruiken InfoVenster () en we zullen een gebeurtenis toevoegen voor de variabele die we definiëren met de methode-instantie, laten we eens kijken:

 functie addMarker () {var coördinaat = createLgRandom (); var marker = nieuwe google.maps.Marker ({positie: coördinaat, kaart: kaart, titel: 'Random Marker -' + markerId}); var infowindow = nieuw google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (markering, 'klik', functie () {infowindow.open (kaart, markering);}); markerId ++; } 

3- Als dit gedaan is, laten we eens kijken hoe onze kaart eruitziet met de functionaliteit van de pop-up die we zojuist hebben toegevoegd:

VERGROTEN

4- Laten we ten slotte eens kijken naar de vergelijkbare functionaliteit die we toepassen op onze bladwijzers, we doen dit door op de link te drukken Voeg bladwijzer toe:

VERGROTEN

Zoals we konden zien, is het vrij eenvoudig om de functionaliteit van onze kaarten en markeringen uit te breiden, we moeten alleen de juiste methoden gebruiken om dit te bereiken.
We hebben de kracht van vectoren al getest door de bezienswaardigheden op een kaart te tonen met de markeringenWe kunnen echter vectoren gebruiken om lijnen te tekenen en de route tussen twee punten op onze kaart te tonen, laten we eens kijken hoe we dat doen:
1- We gaan een bestand maken met de naam add_line.html en we gaan onze API opnemen, evenals de stijlen van het eerste voorbeeld, nu gaan we de coördinaten definiëren die gaan van Madrid tot Barcelona, laten we kijken:

 var-coördinaten Lijn = [[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- Voordat we verder gaan met de initialisatiefunctie van onze kaart, gaan we eerst de functie maken addLine () waar het eerste wat we gaan doen is de reeks coördinaten herhalen en een nieuwe reeks maken die een object van het type zal bevatten LatLng, laten we kijken:

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

3- Vervolgens stellen we de eigenschappen voor onze lijn in, zoals kleur, dekking en dikte. Nadat we dit hebben gedaan, hoeven we alleen maar naar de methode te sturen Polylijn de opties als een parameter en stel de polylijnvariabele in op de huidige kaart:

 var lineOptions = {pad: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0.8} var polyline = nieuw google.maps.Polyline (lineOptions); polyline.setMap (kaart); } 

4- Eindelijk creëren we onze bekende functie initializeMap () en in plaats van een functie met de naam MarkerEvents aan het einde ervan te hebben, gaan we deze regel vervangen door de naam van onze functie addLine (), we maken onze HTML en voeren deze uit in onze browser, het zou er als volgt uit moeten zien:

VERGROTEN

In het vorige voorbeeld voegen we een lijn toe aan onze kaart en zo demonstreren we de vereniging van twee punten om de route ertussen te demonstreren, maar dit voorbeeld, ondanks dat het illustratief is, mist nog steeds iets en het is het feit dat de mobiliteit tussen deze twee punten wordt getoond , zoals een rijdende auto.
Dit klinkt misschien heel ingewikkeld, maar dat is het niet, met behulp van de klassen en methoden van de API We kunnen het oplossen met een paar regels code, laten we eens kijken hoe we het doen:
1- Het eerste is om onze API, onze stijlen en we definiëren onze globale variabelen, we gebruiken dezelfde coördinaten van het vorige voorbeeld om hetzelfde pad te gebruiken, daarnaast definiëren we de variabele polylijn als wereldwijd om het te kunnen gebruiken in de volledige reikwijdte van onze Javascript:

 var-kaart; var polylijn; var-coördinaten Lijn = [[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- Nu maken we onze functie addAnimatedLine () die een vergelijkbare structuur heeft als de functie addLine () Uit het vorige voorbeeld heeft deze functie echter de definitie van het symbool dat we zullen gebruiken om het bewegende object tussen deze twee punten weer te geven, in dit geval zullen we een pijl gebruiken:

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

3- Ten slotte hoeven we deze variabele alleen nog maar in te stellen op de optie pictogrammen uit de definitie van de lijn:

 var lineOptions = {path: linePath, icons: [{icon: arrow symbol}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0.8} 

4- Zodra dit is gebeurd, hoeven we alleen ons pictogram te animeren en we doen dit in de functie genaamd animeren pijl () die we moeten opnemen aan het einde van de definitie van de functie addAnimatedLine () Laten we eens kijken wat de functie bevat:

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

5- Om te eindigen initialiseren we onze kaart zoals we die al kennen en noemen we onze functie addAnimatedLine ()Laten we eens kijken bij het uitvoeren van hoe het eruit ziet in onze browser, het is belangrijk om te vermelden dat de pijl het effect heeft van het verplaatsen van punt naar punt:

VERGROTEN

Met dit laatste voorbeeld beëindigen we deze tutorial, omdat we konden zien dat het gebruik van vectoren in onze kaarten ons in staat stelt hun functionaliteit en bruikbaarheid te vergroten, waardoor we de mogelijkheid hebben om interessante punten tot alternatieve routes te implementeren naar de punten die we erin plaatsen .Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven