Indholdsfortegnelse
De tjenester, der tilbydes af Google Maps Javascript API er lige så varierede som funktionelle, de har en kvalitet, der adskiller sig Google kort Fra deres konkurrenter fungerer disse tjenester generelt asynkront, hvilket gør det muligt at sende anmodningen til en ekstern server, og en metode til tilbagekaldstype er ansvarlig for behandlingen af svarene.En af styrkerne ved disse tjenester er, at de er fuldt kompatible med API -klasser og objekter. Vi kan fra at konsultere adressen på et bestemt punkt på vores kort til endda implementering af gadevisningen.
Inden vi går videre til eksemplerne, lad os se nogle af de vigtigste tjenester, som vi vil bruge i denne vejledning.
GeokodningDenne service giver os mulighed for at omdanne fælles adresser til geografiske koordinater baseret på et punkts breddegrad og længdegrad, dette giver os mulighed for at placere markører eller placere vores kort, for at udføre disse operationer API'en giver en klasse kaldet geokoder ().
AfstandsmatrixDenne service hjælper os med at beregne afstanden og varigheden af ruten mellem flere punkter, noget der er meget udbredt i dag, til dette har vi til formål google.maps.DistanceMatrixService og de tilhørende metoder.
Gade synService Gade syn eller street view giver os 360-graders panoramaudsigt i de områder, hvor det har dækning, noget der får vores kort til at skille sig ud uden tvivl.
Husk, at jeg her detaljerede driften af API og hændelseshåndtering i Google Maps og introduktionen for at forstå Javascript API i Google Maps.
For at udføre dette eksempel bruger vi tjenesten geokoder () Men som vi nævnte, giver det os mulighed for at omdanne en adresse til en koordinat, det er fint, men for den konventionelle bruger er det noget, der ikke ser meget brug for det, og derfor vil vi bruge omvendt geokoder for at få den adresse, vi har brug for med et enkelt klik. Lad os se de trin, vi skal følge:
1- For det første, som vi allerede ved, inkluderer vi API'en, uden at glemme at bruge vores legitimationsoplysninger, ud over dette vil vi inkludere biblioteket med tegning der gør det muligt for os at implementere funktionaliteten af tegningsmarkører, vi sammenkæder dette bibliotek til vores legitimationsoplysninger med & symbolet som vi vil se nedenfor:
2- Vi kan ikke glemme stilarterne for kortet, som vil give det typen af visualisering på siden, samt at definere de globale variabler, der vil have et globalt omfang i alle metoderne i vores kode:
var kort; var geocoder var popup;
3- Herefter definerer vi vores metode initializeMap () hvor den første ting vi vil gøre er at erklære vores objektobjekt geokoder hjælpe os fra klassen Geokoder () og med InfoWindow objektet til pop op, der viser adressen på skærmen:
funktion initializeMap () {geocoder = ny google.maps.Geocoder (); popup = nyt google.maps.InfoWindow (); 4- Vi inkluderer de konventionelle muligheder på kortet, såsom midten, zoomen og basetypen, vi får elementet SOL og vi instantiserer metoden Kort:
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 = nyt google.maps.Map (mapElement, mapOptions); 5- Nu opretter vi tegnehåndteringen, der giver os mulighed for at tegne markører, for dette vil vi lave en forekomst af DrawingManager, vi gør det synligt i brugergrænsefladen og vælger, hvilke tilstande der skal vises i kontrolenheden, og i hvilken position de vil være:
var drawingManager = ny google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); 6- Nu aktiverer vi den nyoprettede funktionalitet, vi tilføjer lytteren til vores arrangement og til at optræde omvendt geokoder vi opnår positionen i breddegrad og længdegrad af vores markør med metoden getPosition ():
drawingManager.setMap (kort); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- For at fuldføre omvendt geokoder vi vil bruge tjenesten af geokode () og vi vil gøre en betingelse for at kontrollere, at tjenesten returnerer et gyldigt svar, hvis ikke vi håndterer det, så brugeren ved, at det mislykkedes, og hvis resultatet er korrekt, kalder vi vores metode Vis adresse ():
geocoder.geocode ({'latLng': markerPosition}, funktion (resultater, status) {if (status == google.maps.GeocoderStatus.OK) {if (resultater) {ShowAddress (resultater [0], markør);}}} else {alert ("Service mislykkedes:" + status);}}); 8- Endelig skal vi kun bygge metoden til Vis adresse () som vil modtage resultatet af vores omvendte geokoder og positionen af markøren, med dette kan vi etablere midten og vise oplysningerne om den formaterede adresse uden problemer:
funktion ShowAddress (resultat, markør) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adresse: '+ resultat.formateret_adresse; popup.setContent (popupContent); popup.open (kort, markør); } 9- Vi lukker de tilsvarende tags og tilføjer delen af HTML -koden for at fuldføre vores eksempel:
Find adressen på kortet med et enkelt klik
10- Vi udfører i vores browser og klikker på et vilkårligt punkt på vores kort, og vi får den adresse, der vises i pop -up'en, som vi erklærer, den skal se ud som følger:
FORSTØRRE
Det Google Maps Javascript API giver os ganske nyttige tjenester, en af dem er afstandsmatrix som giver os mulighed for at beregne afstanden og tiden mellem flere punkter, en funktionalitet, som vi kan bruge til at implementere forskellige løsninger i enhver virksomhed, fra beregning af leveringstider eller etablering af den mest optimale rute mellem forskellige punkter. Lad os se de trin, vi skal følge for at implementere denne funktionalitet mellem vores kort.
1- Vi inkluderer vores API sammen med biblioteket tegning, samt stilarterne til visning af vores kort og beholderen i vores matrix:
2- Vi definerer globale variabler til brug i hele vores kodeks og i funktionen initializeMap () Vi initialiserer arraysne for at håndtere breddegrad og længdegrad for både oprindelse og destination:
var kort; var originLatLon; var destinationLatLon; var distanceMatrixService; var markerCount; var arrayResult; funktion initializeMap () {originLatLon = []; destinationLatLon = []; 3- Så i den samme funktion får vi knappen og hændelsesbehandleren til den, derudover initialiserer vi objektet til service af DistanceMatrixService samt tælleren for markørerne og tildele resultatet af arrayet til en container div:
var generereBtnMatrix = document.getElementById ('generereMatrix'); genererBtnMatrix.addEventListener ('klik', funktion () {MatrixRequest ();}); distanceMatrixService = nyt google.maps.DistanceMatrixService (); markerCount = 0; result array = document.getElementById ('result array'); 4- Vi inkluderer de konventionelle muligheder på kortet, såsom midten, zoomen og basetypen, vi får elementet SOL og vi instantiserer metoden Kort:
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 = nyt google.maps.Map (mapElement, mapOptions); 5- Som i den foregående øvelse skabte vi tegningschefen, der giver os mulighed for at tegne markører, for dette vil vi lave en forekomst af DrawingManager og vi giver de nødvendige muligheder, aktiverer det og tilføjer lytteren til begivenheden:
var drawingManager = ny google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); drawingManager.setMap (kort); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Herefter udfører vi valideringerne for at begrænse antallet af tilladte destinationer og indstille de ikoner, vi skal bruge til vores bogmærker:
markerCount ++; if (markerCount> 10) {alert ("Ingen flere destinationer tilladt"); drawingManager.setMap (null); marker.setMap (null); Vend tilbage; } hvis (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } ellers {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videospil.png.webp'); }}); 7- Nu skal vi kun oprette vores funktioner til at håndtere de anmodninger, der er stillet til tjeneste for distanceMatrixService, først opretter vi den, der vil forberede anmodningsejendommen:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({origins: LatinSource, destinationer: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Vi opretter funktionen til tilbagekald, og det giver os mulighed for at få svar fra tjenesten, og hvor vi vil inkludere de nødvendige valideringer, hvis tjenesten ikke håndterer fejlen på den bedste måde:
funktion getResultMatrix (resultat, status) {resultMatrix.innerHTML = ''; hvis (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 distance = element.distance.text; var varighed = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, distance, varighed, i, j); }}} else {alert ('Kan ikke få array:' + status); } 9- Derudover opretter vi den funktion, der vil skrive de opnåede resultater i den tilsvarende div:
functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount) {var eksisterendeContent = resultResult.innerHTML; var newContent; newContent = 'Origin ' + countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; newContent + = 'Destination ' + countLetters (destinationAddressCount) +':
'; newContent + = destinationAddress + '
'; newContent + = 'Skæbne: ' + distance +'
'; newContent + = 'Skæbne: ' + varighed +'
'; newContent + = '
'; resultArray.innerHTML = eksisterendeContent + newContent; } 9- Endelig i vores Javascript Vi håndterer tællerne i en funktion for at returnere det navn, der svarer til tælleren på markøren, som vi placerer:
function countLetters (count) {switch (count) {case 0: return 'Comics Store'; sag 1: returner 'Videospilbutik'; sag 2: returner 'Comics Store'; sag 3: returner 'Comics Store'; sag 4: returner 'Videospilbutik'; standard: return null; }} 10- Vi lukker de tilsvarende tags og tilføjer delen af koden HTML for at fuldføre vores eksempel:
Brug afstandsmatrix
11- Vi udfører vores eksempel i browseren og for at visualisere driften af vores kort placerer vi 4 interessepunkter og trykker på knappen Generer Distance Matrix:
FORSTØRRE
For at afslutte denne vejledning implementerer vi tjenesten Gade syn, Det er et ret simpelt eksempel, men det tilføjet til de andre tilgængelige tjenester vil få vores kort til at skille sig ud over de andre, lad os se, hvad vi skal gøre for at implementere denne service:
1- Vi inkluderer API'en og definerer de tilsvarende stilarter, i dette eksempel vil vi ikke bruge tegnebiblioteket, så det vil ikke blive inkluderet:
2- Vi definerer vores globale variabler og skaber vores funktion initializeMap () Med de konventionelle muligheder, midten af vores kort, zoom og basetype, får vi elementet SOL og vi instantiserer metoden Kort:
var kort; var geocoder; var streetView; funktion initializeMap () {popup = ny google.maps.InfoWindow (); geocoder = ny 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 = nyt google.maps.Map (mapElement, mapOptions); 3- Inden for vores funktion kalder vi tjenesten for Gade syn og derefter opretter vi en funktion til at indstille dens muligheder såsom placering og synspunkt:
streetView = map.getStreetView (); } funktion setOptionsStreetView (placering) {streetView.setPosition (placering); streetView.setPov ({overskrift: 0, kløe: 10}); } 4- Endelig skaber vi funktionerne for at kunne skifte mellem den konventionelle visning af kortet og Streer View, lad os se, hvordan disse ser ud:
funktion showMap () {streetView.setVisible (false); } funktion showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (true); } 5- Vi lukker de tilsvarende tags og tilføjer delen af koden HTML for at fuldføre vores eksempel:
Kort med Street View
6- Vi kører vores eksempel i browseren og trykker på knappen Vis Street View at visualisere funktionaliteten, som vi kan se på følgende billede:
FORSTØRRE
Hermed afslutter vi denne vejledning, da vi var i stand til at værdsætte de tjenester, der findes i Google Maps Javascript API De giver os mulighed for at udvide funktionaliteten af vores kort meget mere og placere det som en mulighed for at tage hensyn til i de systemer, vi implementerer, der skal bruge placering og tid og / eller afstandsberegninger.
Jeg minder dig om denne vejledning, som også vil være praktisk: Lær brugen af vektorer i Google MapsKan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
