Innehållsförteckning
De tjänster som erbjuds av Google Maps Javascript API är lika varierade som funktionella, de har en egenskap som skiljer sig åt Google kartor Från sina konkurrenter fungerar dessa tjänster i allmänhet asynkront, vilket gör att begäran kan göras till en extern server och en metod för återuppringning är ansvarig för bearbetning av svaren.En av styrkorna med dessa tjänster är att de är fullt kompatibla med API -klasser och objekt. Vi kan från att konsultera adressen till en specifik punkt på vår karta till och med implementera gatuvyn.
Innan vi går vidare till exemplen, låt oss se några av de viktigaste tjänsterna som vi kommer att använda i denna handledning.
GeokodningDenna tjänst gör att vi kan omvandla gemensamma adresser till geografiska koordinater baserat på latitud och longitud för en punkt, detta gör att vi kan placera markörer eller placera vår karta, för att utföra dessa operationer API ger en klass som heter geokoder ().
AvståndsmatrisDenna tjänst hjälper oss att beräkna sträckans avstånd och varaktighet mellan flera punkter, något som används mycket idag, för detta har vi syftet med google.maps.DistanceMatrixService och dess associerade metoder.
GatuvyService Gatuvy eller gatuvy ger oss 360-graders panoramautsikt i de områden där den har täckning, något som kommer att få våra kartor att sticka ut utan tvekan.
Kom ihåg att här har jag beskrivit hur API och händelsehantering fungerar i Google Maps och introduktionen för att förstå Javascript API i Google Maps.
För att genomföra detta exempel kommer vi att använda tjänsten geokoder () Men som vi nämnde tillåter detta oss att omvandla en adress till en koordinat, det här är bra, men för den konventionella användaren är det något som inte ser mycket nytta av det, därför kommer vi att använda omvänd geokoder för att få adressen vi behöver med ett klick. Låt oss se stegen vi måste följa:
1- Först, som vi redan vet, inkluderar vi API, utan att glömma att använda våra referenser, utöver detta kommer vi att inkludera biblioteket med teckning som gör det möjligt för oss att implementera funktionaliteten för ritmarkörer, sammanfogar vi detta bibliotek till vår legitimation med symbolen & som vi kommer att se nedan:
2- Vi kan inte glömma stilarna för kartan, vilket ger den typen av visualisering på sidan, liksom att definiera de globala variablerna som kommer att ha ett globalt omfång i alla metoder i vår kod:
var karta; var geocoder var popup;
3- Efter detta definierar vi vår metod initializeMap () där det första vi kommer att göra är att förklara vårt objekt av typ geokoder hjälper oss från klassen Geokoder () och med InfoWindow objektet för popup -fönstret som visar adressen på skärmen:
funktion initializeMap () {geocoder = ny google.maps.Geocoder (); popup = nytt google.maps.InfoWindow (); 4- Vi inkluderar de konventionella alternativen på kartan som centrum, zoomen och bastypen, vi får elementet SOL och vi instanserar metoden Karta:
google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = nytt google.maps.Map (mapElement, mapOptions); 5- Nu skapar vi ritningshanteraren som gör att vi kan rita markörer, för detta kommer vi att göra en instans av DrawingManager, vi gör det synligt i användargränssnittet och väljer vilka lägen som ska visas i kontrollen och i vilken position de kommer att vara:
var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}})); 6- Nu aktiverar vi den nyskapade funktionaliteten, vi lägger till lyssnaren för vårt event och för att uppträda omvänd geokoder vi får positionen i latitud och longitud för vår markör med metoden getPosition ():
drawingManager.setMap (karta); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- För att slutföra omvänd geokoder vi kommer att använda tjänsten av geokod () och vi kommer att göra ett villkor för att verifiera att tjänsten returnerar ett giltigt svar om inte vi hanterar det så att användaren vet att det misslyckades och om resultatet är korrekt kallar vi vår metod Visa adress ():
geocoder.geocode ({'latLng': markerPosition}, funktion (resultat, status) {if (status == google.maps.GeocoderStatus.OK) {if (resultat) {ShowAddress (resultat [0], markör);}} else {alert ("Tjänsten misslyckades:" + status);}}); 8- Slutligen behöver vi bara bygga metoden för Visa adress () som kommer att ta emot resultatet av vår omvända geokoder och markörens position, med detta kan vi etablera mitten och visa informationen för den formaterade adressen utan problem:
funktion ShowAddress (resultat, markör) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adress: '+ resultat.formaterad_adress; popup.setContent (popupContent); popup.open (karta, markör); } 9- Vi stänger motsvarande taggar och lägger till delen av HTML -koden för att slutföra vårt exempel:
Hitta adressen på kartan med ett klick
10- Vi kör i vår webbläsare och klickar på valfri punkt på vår karta så får vi adressen som visas i popup -fönstret som vi deklarerar, den ska se ut så här:
FÖRSTORA
De Google Maps Javascript API ger oss ganska användbara tjänster, en av dem är avståndsmatris vilket gör att vi kan beräkna avståndet och tiden mellan flera punkter, en funktionalitet som vi kan använda för att implementera olika lösningar i alla verksamheter, från att beräkna leveranstider eller etablera den mest optimala vägen mellan olika punkter. Låt oss se stegen vi måste följa för att implementera denna funktionalitet mellan våra kartor.
1- Vi inkluderar vårt API tillsammans med biblioteket teckning, liksom stilarna för visning av vår karta och behållaren i vår matris:
2- Vi definierar globala variabler för användning i hela vår kod och i funktionen initializeMap () Vi initierar matriserna för att hantera latitud och longitud för både ursprung och destination:
var karta; var originLatLon; var destinationLatLon; var distanceMatrixService; var markerCount; var arrayResult; funktion initializeMap () {originLatLon = []; destinationLatLon = []; 3- Sedan får vi i samma funktion knappen och händelsehanteraren för den, dessutom initierar vi objektet för tjänsten av DistanceMatrixService samt räknaren för markörerna och tilldela resultatet av matrisen till en container div:
var genereraBtnMatrix = document.getElementById ('genereraMatrix'); genereraBtnMatrix.addEventListener ('klick', funktion () {MatrixRequest ();}); distanceMatrixService = nytt google.maps.DistanceMatrixService (); markerCount = 0; result array = document.getElementById ('result array'); 4- Vi inkluderar de konventionella alternativen på kartan som mitten, zoomen och basen, vi får elementet SOL och vi instanserar metoden Karta:
google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = nytt google.maps.Map (mapElement, mapOptions); 5- Liksom i föregående övning skapade vi ritningshanteraren som gör att vi kan rita markörer, för detta kommer vi att göra en instans av DrawingManager och vi tillhandahåller de nödvändiga alternativen, aktiverar det och lägger till lyssnaren för evenemanget:
var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}})); drawingManager.setMap (karta); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Efter detta utför vi valideringarna för att begränsa antalet tillåtna destinationer och ställer in de ikoner som vi ska använda för våra bokmärken:
markerCount ++; if (markerCount> 10) {alert ("Inga fler destinationer tillåts"); drawingManager.setMap (null); marker.setMap (null); lämna tillbaka; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } annat {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videospel.png.webp'); }}); 7- Nu behöver vi bara skapa våra funktioner för att hantera förfrågningar till tjänsten distanceMatrixService, först skapar vi den som förbereder egenskapen för begäran:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({origins: LatinSource, destinationer: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Vi skapar funktionen för återuppringning och det gör att vi kan få svar från tjänsten och där vi kommer att inkludera nödvändiga valideringar om tjänsten inte hanterar felet på bästa sätt:
funktion getResultMatrix (resultat, status) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = result.destinationAddresses; för (var i = 0, l = originAddresses.length; i <l; i ++) {var element = resultat.rader [i] .elements; för (var j = 0, m = elements.length; j <m; j ++) {var originAddress = originAddresses [i]; var destinationAddress = destinationAddresses [j]; var element = element [j]; var distans = element.distance.text; var varaktighet = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, distans, varaktighet, i, j); }}} else {alert ('Det gick inte att få array:' + status); } 9- Dessutom skapar vi funktionen som skriver resultaten som erhållits i motsvarande div:
functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount) {var existentContent = resultResult.innerHTML; var newContent; newContent = 'Origin ' + countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; newContent + = 'Destination ' + countLetters (destinationAddressCount) +':
'; newContent + = destinationAddress + '
'; newContent + = 'Öde: ' + avstånd +'
'; newContent + = 'Öde: ' + varaktighet +'
'; newContent + = '
'; resultArray.innerHTML = existentContent + newContent; } 9- Slutligen i vår Javascript Vi hanterar räknarna i en funktion för att returnera namnet som motsvarar räknaren för markören som vi placerar:
function countLetters (count) {switch (count) {case 0: return 'Comics Store'; fall 1: returnera "Videospelbutik"; fall 2: returnera 'Comics Store'; fall 3: returnera 'Comics Store'; fall 4: returnera "Videospelbutik"; default: return null; }} 10- Vi stänger motsvarande taggar och lägger till delen av koden HTML för att slutföra vårt exempel:
Använd avståndsmatris
11- Vi kör vårt exempel i webbläsaren och för att visualisera hur vår karta fungerar, placerar vi 4 intressanta platser och trycker på knappen Skapa distansmatris:
FÖRSTORA
För att avsluta denna handledning implementerar vi tjänsten Gatuvy, Det är ett ganska enkelt exempel men det som läggs till de andra tillgängliga tjänsterna kommer att få våra kartor att sticka ut över de andra, låt oss se vad vi måste göra för att implementera denna tjänst:
1- Vi inkluderar API och definierar motsvarande stilar, i det här exemplet kommer vi inte att använda ritbiblioteket så det kommer inte att inkluderas:
2- Vi definierar våra globala variabler och skapar vår funktion initializeMap () Med de konventionella alternativen, mitten av vår karta, zoom och bastyp, får vi elementet SOL och vi instanserar metoden Karta:
var karta; var geocoder; var streetView; funktion initializeMap () {popup = nytt google.maps.InfoWindow (); geocoder = nytt google.maps.Geocoder (); google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = nytt google.maps.Map (mapElement, mapOptions); 3- Inom vår funktion kallar vi tjänsten för Gatuvy och efter detta skapar vi en funktion för att ställa in dess alternativ som plats och synvinkel:
streetView = map.getStreetView (); } funktion setOptionsStreetView (plats) {streetView.setPosition (plats); streetView.setPov ({rubrik: 0, klåda: 10}); } 4- Slutligen skapar vi funktionerna för att kunna växla mellan den konventionella vyn på kartan och Streer View, låt oss se hur dessa ser ut:
funktion showMap () {streetView.setVisible (false); } funktionen showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (true); } 5- Vi stänger motsvarande taggar och lägger till delen av koden HTML för att slutföra vårt exempel:
Karta med Street View
6- Vi kör vårt exempel i webbläsaren och trycker på knappen Visa Street View för att visualisera funktionaliteten som vi kan se i följande bild:
FÖRSTORA
Med detta avslutar vi denna handledning, eftersom vi kunde uppskatta de tjänster som finns i Google Maps Javascript API De tillåter oss att utöka funktionaliteten på våra kartor mycket mer, placera den som ett alternativ att ta hänsyn till i de system som vi implementerar som behöver använda plats- och tid- och / eller avståndsberäkningar.
Jag påminner dig om denna handledning, som också kommer att vara till nytta: Lär dig hur du använder vektorer i Google MapsGillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
