Innholdsfortegnelse
Tjenestene som tilbys av Google Maps Javascript API er like varierte som funksjonelle, de har en kvalitet som skiller seg ut Google Kart Fra konkurrentene fungerer disse tjenestene vanligvis asynkront, noe som gjør at forespørselen kan sendes til en ekstern server, og en tilbakeringingsmetode er ansvarlig for behandling av svarene.En av styrkene til disse tjenestene er at de er fullt kompatible med API -klasser og objekter. Vi kan fra å konsultere adressen til et bestemt punkt på kartet vårt til og med implementere gatevisningen.
Før vi går videre til eksemplene, la oss se noen av de viktigste tjenestene vi skal bruke i denne opplæringen.
GeokodingDenne tjenesten lar oss transformere vanlige adresser til geografiske koordinater basert på et punkts breddegrad og lengdegrad, dette lar oss plassere markører eller plassere kartet vårt, for å utføre disse operasjonene API gir en klasse kalt geokoder ().
AvstandsmatriseDenne tjenesten hjelper oss med å beregne avstanden og varigheten av ruten mellom flere punkter, noe som er mye brukt i dag, for dette har vi som formål google.maps.DistanceMatrixService og tilhørende metoder.
GatevisningService Gatevisning eller street view gir oss 360-graders panoramautsikt i områdene der det har dekning, noe som får kartene våre til å skille seg ut uten tvil.
Husk at her har jeg beskrevet operasjonen av API og hendelseshåndtering i Google Maps og introduksjonen for å forstå Javascript API i Google Maps.
For å utføre dette eksemplet bruker vi tjenesten geokoder () Men som vi nevnte, tillater dette oss å transformere en adresse til en koordinat, dette er greit, men for den konvensjonelle brukeren er det noe som ikke ser mye nytte av det, og derfor vil vi bruke omvendt geokoder for å få adressen vi trenger med ett klikk. La oss se trinnene vi må følge:
1- Først, som vi allerede vet, inkluderer vi API, uten å glemme å bruke legitimasjonen vår, i tillegg til dette vil vi inkludere biblioteket til tegning som gjør det mulig for oss å implementere funksjonaliteten til tegningsmarkører, kobler vi dette biblioteket til vår legitimasjon med & -symbolet som vi vil se nedenfor:
2- Vi kan ikke glemme stilene for kartet, som vil gi det typen visualisering på siden, samt definere de globale variablene som vil ha et globalt omfang i alle metodene i koden vår:
var kart; var geocoder var popup;
3- Etter dette definerer vi metoden vår initializeMap () der det første vi skal gjøre er å erklære vårt objekt av type geokoder hjelpe oss fra timen Geokoder () og med InfoWindow objektet for popup -vinduet som vil vise adressen på skjermen:
funksjon initializeMap () {geocoder = ny google.maps.Geocoder (); popup = nytt google.maps.InfoWindow (); 4- Vi inkluderer de konvensjonelle alternativene på kartet, for eksempel midten, zoomen og basetypen, vi får elementet SOL og vi instanserer metoden Kart:
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 = new google.maps.Map (mapElement, mapOptions); 5- Nå lager vi tegningssjefen som lar oss tegne markører, for dette skal vi lage en forekomst av DrawingManager, vi gjør det synlig i brukergrensesnittet og velger hvilke moduser som skal vises i kontrollen og i hvilken posisjon de vil være:
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- Nå aktiverer vi den nyopprettede funksjonaliteten, vi legger til lytteren for arrangementet vårt og for å opptre omvendt geokoder vi får posisjonen i bredde- og lengdegrad for markøren vår med metoden getPosition ():
drawingManager.setMap (kart); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- For å fullføre omvendt geokoder vi vil bruke tjenesten til geokode () og vi vil gjøre en betingelse for å bekrefte at tjenesten returnerer et gyldig svar hvis ikke vi håndterer det slik at brukeren vet at det mislyktes, og hvis resultatet er riktig, kaller vi metoden vår Vis adresse ():
geocoder.geocode ({'latLng': markerPosition}, funksjon (resultater, status) {if (status == google.maps.GeocoderStatus.OK) {if (resultater) {ShowAddress (resultater [0], markør);}} else {alert ("Tjenesten mislyktes:" + status);}}); 8- Til slutt må vi bare bygge metoden for Vis adresse () som vil motta resultatet av vår omvendte geokoder og posisjonen til markøren, med dette kan vi etablere senteret og vise informasjonen til den formaterte adressen uten problemer:
funksjon ShowAddress (resultat, markør) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adresse: '+ resultat.formatert_adresse; popup.setContent (popupContent); popup.open (kart, markør); } 9- Vi lukker de tilsvarende taggene og legger til delen av HTML -koden for å fullføre vårt eksempel:
Finn adressen på kartet med ett klikk
10- Vi kjører i nettleseren vår og klikker på et hvilket som helst punkt på kartet vårt, og vi får adressen vist i popup -vinduet som vi erklærer, den skal se slik ut:
FORSTØRRE
De Google Maps Javascript API gir oss ganske nyttige tjenester, en av dem er avstandsmatrise som lar oss beregne avstand og tid mellom flere punkter, en funksjonalitet som vi kan bruke til å implementere forskjellige løsninger i enhver virksomhet, fra å beregne leveringstider eller etablere den mest optimale ruten mellom forskjellige punkter. La oss se trinnene vi må følge for å implementere denne funksjonaliteten mellom kartene våre.
1- Vi inkluderer vårt API sammen med biblioteket tegning, samt stilene for visning av kartet vårt og beholderen til matrisen:
2- Vi definerer globale variabler for bruk i hele koden og i funksjonen initializeMap () Vi initialiserer matrisene for å håndtere breddegrad og lengdegrad for både opprinnelsen og destinasjonen:
var kart; var originLatLon; var destinationLatLon; var distanceMatrixService; var markerCount; var arrayResult; funksjon initializeMap () {originLatLon = []; destinationLatLon = []; 3- Så i samme funksjon får vi knappen og hendelsesbehandleren for den, i tillegg initialiserer vi objektet for tjenesten til DistanceMatrixService samt telleren for markørene og tilordne resultatet av matrisen til en container div:
var generereBtnMatrix = document.getElementById ('generereMatrix'); genererBtnMatrix.addEventListener ('klikk', funksjon () {MatrixRequest ();}); distanceMatrixService = nytt google.maps.DistanceMatrixService (); markerCount = 0; result array = document.getElementById ('result array'); 4- Vi inkluderer de konvensjonelle alternativene på kartet, for eksempel midten, zoomen og basetypen, vi får elementet SOL og vi instanserer metoden Kart:
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 = new google.maps.Map (mapElement, mapOptions); 5- Som i forrige øvelse opprettet vi tegningslederen som lar oss tegne markører, for dette vil vi lage en forekomst av DrawingManager og vi gir de nødvendige alternativene, aktiverer det og legger til lytteren for arrangementet:
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 (kart); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Etter dette utfører vi valideringene for å begrense antall tillatte destinasjoner og angir ikonene som vi skal bruke for bokmerkene våre:
markerCount ++; if (markerCount> 10) {alert ("Ingen flere destinasjoner tillatt"); drawingManager.setMap (null); marker.setMap (null); komme tilbake; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } annet {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videospill.png.webp'); }}); 7- Nå trenger vi bare å lage våre funksjoner for å håndtere forespørslene til tjenesten til distanceMatrixService, først lager vi den som skal forberede forespørselseiendommen:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({origins: LatinSource, destinasjoner: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Vi oppretter funksjonen for tilbakeringing, og det vil tillate oss å få svar fra tjenesten, og der vil vi inkludere de nødvendige valideringene hvis tjenesten ikke klarer å håndtere feilen på den beste måten:
function getResultMatrix (resultat, status) {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 = elementer [j]; var avstand = element.distance.text; var varighet = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, distanse, varighet, i, j); }}} else {alert ('Kunne ikke hente array:' + status); } 9- I tillegg lager vi funksjonen som vil skrive resultatene oppnådd i den tilsvarende div:
functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount) {var eksisterendeContent = resultResult.innerHTML; var newContent; newContent = 'Origin ' + countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; newContent + = 'Destinasjon ' + countLetters (destinationAddressCount) +':
'; newContent + = destinationAddress + '
'; newContent + = 'Skjebne: ' + avstand +'
'; newContent + = 'Skjebne: ' + varighet +'
'; newContent + = '
'; resultArray.innerHTML = eksisterendeContent + newContent; } 9- Til slutt i vår Javascript Vi håndterer tellerne i en funksjon for å returnere navnet som tilsvarer telleren til markøren vi plasserer:
function countLetters (count) {switch (count) {case 0: return 'Comics Store'; sak 1: returner 'Videospillbutikk'; sak 2: returner 'Tegneseriebutikk'; sak 3: returner 'Comics Store'; sak 4: returner 'Videospillbutikk'; standard: return null; }} 10- Vi lukker de tilhørende kodene og legger til delen av koden HTML for å fullføre vårt eksempel:
Bruk avstandsmatrise
11- Vi utfører vårt eksempel i nettleseren, og for å visualisere driften av kartet vårt, plasserer vi 4 interessepunkter og trykker på knappen Generer Distance Matrix:
FORSTØRRE
For å fullføre denne opplæringen implementerer vi tjenesten Gatevisning, Det er et ganske enkelt eksempel, men det som er lagt til de andre tilgjengelige tjenestene, vil få kartene våre til å skille seg ut over de andre, la oss se hva vi må gjøre for å implementere denne tjenesten:
1- Vi inkluderer API -en og definerer de tilsvarende stilene. I dette eksemplet vil vi ikke bruke tegnebiblioteket, så det vil ikke bli inkludert:
2- Vi definerer våre globale variabler og lager vår funksjon initializeMap () Med de konvensjonelle alternativene, midten av kartet vårt, zoom og type base, får vi elementet SOL og vi instanserer metoden Kart:
var kart; var geocoder; var streetView; funksjon 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 = new google.maps.Map (mapElement, mapOptions); 3- Innenfor vår funksjon kaller vi tjenesten til Gatevisning og etter dette oppretter vi en funksjon for å angi alternativene som plassering og synspunkt:
streetView = map.getStreetView (); } funksjon setOptionsStreetView (plassering) {streetView.setPosition (plassering); streetView.setPov ({overskrift: 0, kløe: 10}); } 4- Til slutt lager vi funksjonene for å kunne bytte mellom den konvensjonelle visningen av kartet og Streer View, la oss se hvordan disse ser ut:
function showMap () {streetView.setVisible (false); } funksjon showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (true); } 5- Vi lukker de tilhørende kodene og legger til delen av koden HTML for å fullføre vårt eksempel:
Kart med Street View
6- Vi kjører vårt eksempel i nettleseren og trykker på knappen Vis Street View for å visualisere funksjonaliteten som vi kan se på følgende bilde:
FORSTØRRE
Med dette avslutter vi denne opplæringen, ettersom vi var i stand til å sette pris på tjenestene i Google Maps Javascript API De lar oss utvide funksjonaliteten til kartene våre mye mer, og posisjonere det som et alternativ for å ta hensyn til i systemene vi implementerer som trenger å bruke posisjon og tid og / eller avstandsberegninger.
Jeg minner deg om denne opplæringen, som også vil komme godt med: Lær hvordan du bruker vektorer i Google MapsLikte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
