Inhoudsopgave
De diensten die worden aangeboden door de Google Maps Javascript-API zijn even gevarieerd als functioneel, ze hebben een kwaliteit die zich onderscheidt Google maps Van hun concurrenten werken deze diensten over het algemeen asynchroon, waardoor het verzoek kan worden gedaan aan een externe server en een callback-methode is verantwoordelijk voor het verwerken van de antwoorden.Een van de sterke punten van deze services is dat ze volledig compatibel zijn met API-klassen en -objecten. We kunnen van het raadplegen van het adres van een specifiek punt op onze kaart tot zelfs het implementeren van de straatweergave.
Laten we, voordat we verder gaan met de voorbeelden, eens kijken naar enkele van de belangrijkste services die we in deze zelfstudie zullen gebruiken.
GeocoderingDeze service stelt ons in staat om gemeenschappelijke adressen om te zetten in geografische coördinaten op basis van de breedte- en lengtegraad van een punt, dit stelt ons in staat om markeringen te plaatsen of onze kaart te positioneren, om deze bewerkingen uit te voeren biedt de API een klasse genaamd geocoder ().
AfstandsmatrixDeze service helpt ons om de afstand en duur van de route tussen meerdere punten te berekenen, iets dat tegenwoordig veel wordt gebruikt, hiervoor hebben we het doel google.maps.DistanceMatrixService en de bijbehorende methoden.
StraatbeeldDienst Straatbeeld of street view biedt ons 360-graden panoramische uitzichten in de gebieden waar het dekking heeft, iets waardoor onze kaarten ongetwijfeld opvallen.
Onthoud dat ik hier de werking van de API en het afhandelen van gebeurtenissen in Google Maps en de inleiding heb beschreven om de Javascript-API in Google Maps te begrijpen.
Om dit voorbeeld uit te voeren, gebruiken we de service geocoder () Maar zoals we al zeiden, dit stelt ons in staat om een adres om te zetten in een coördinaat, dit is prima, maar voor de conventionele gebruiker is het iets dat er niet veel zin in heeft, daarom zullen we de omgekeerde geocoder om met één klik het adres te krijgen dat we nodig hebben. Laten we eens kijken welke stappen we moeten volgen:
1- Ten eerste, zoals we al weten, nemen we de API op, zonder te vergeten onze inloggegevens te gebruiken, daarnaast zullen we de bibliotheek van tekening waarmee we de functionaliteit van tekenmarkeringen kunnen implementeren, voegen we deze bibliotheek samen met onze referentie met het & -symbool, zoals we hieronder zullen zien:
2- We mogen de stijlen voor de kaart niet vergeten, die het het type visualisatie op de pagina zullen geven, evenals het definiëren van de globale variabelen die een globaal bereik zullen hebben in alle methoden van onze code:
var-kaart; var geocoder var pop-up;
3- Hierna definiëren we onze methode initializeMap () waar het eerste wat we zullen doen is ons object van type declareren geocoder ons helpen uit de klas Geocoder () en met InfoVenster het object voor de pop-up die het adres op het scherm zal weergeven:
functie initializeMap () {geocoder = nieuwe google.maps.Geocoder (); pop-up = nieuw google.maps.InfoWindow (); 4- We nemen de conventionele opties van de kaart op, zoals het midden, de zoom en het type basis, we verkrijgen het element ZON en we instantiëren de methode Kaart:
google.maps.visualRefresh = waar; var mapOptions = {center: nieuwe google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); kaart = nieuwe google.maps.Map (mapElement, mapOptions); 5- Nu maken we de tekenmanager waarmee we markeringen kunnen tekenen, hiervoor zullen we een instantie maken van TekeningManager, we maken het zichtbaar in de gebruikersinterface en selecteren welke modi in de besturing worden weergegeven en in welke positie ze zullen zijn:
var drawingManager = nieuw google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); 6- Nu schakelen we de nieuw gecreëerde functionaliteit in, we voegen de luisteraar toe voor ons evenement en om op te treden omgekeerde geocoder we verkrijgen de positie in breedte- en lengtegraad van onze marker met de methode getPositie ():
tekeningManager.setMap (kaart); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- Om de . te voltooien omgekeerde geocoder we zullen gebruik maken van de service van geocode () en we zullen een voorwaarde stellen om te verifiëren dat de service een geldig antwoord retourneert, zo niet, dan behandelen we het zodat de gebruiker weet dat het is mislukt en als het resultaat correct is, noemen we onze methode Toon adres ():
geocoder.geocode ({'latLng': markerPosition}, function (resultaten, status) {if (status == google.maps.GeocoderStatus.OK) {if (resultaten) {ShowAddress (resultaten [0], markering);}} else {waarschuwing ("Service mislukt:" + status);}}); 8- Ten slotte hoeven we alleen de methode van te bouwen Toon adres () die het resultaat van onze omgekeerde geocoder en de positie van de markering ontvangt, hiermee kunnen we het centrum bepalen en de informatie van het opgemaakte adres zonder enig probleem weergeven:
functie ShowAddress (resultaat, markering) {map.setCenter (marker.getPosition ()); kaart.setZoom (13); var popupContent = 'Adres: '+ resultaat.formatted_address; popup.setContent (popupContent); popup.open (kaart, markering); } 9- We sluiten de bijbehorende tags en voegen het gedeelte van de HTML-code toe om ons voorbeeld te vervolledigen:
Vind adres op de kaart met één klik
10- We voeren het uit in onze browser en klikken op een willekeurig punt op onze kaart en we zullen het adres krijgen dat wordt weergegeven in de pop-up die we aangeven, het zou er als volgt uit moeten zien:
VERGROTEN
De Google Maps Javascript-API biedt ons behoorlijk nuttige diensten, een daarvan is de afstandsmatrix waarmee we de afstand en tijd tussen meerdere punten kunnen berekenen, een functionaliteit die we kunnen gebruiken om verschillende oplossingen in elk bedrijf te implementeren, van het berekenen van levertijden tot het bepalen van de meest optimale route tussen verschillende punten. Laten we eens kijken welke stappen we moeten volgen om deze functionaliteit tussen onze kaarten te implementeren.
1- We voegen onze API samen met de bibliotheek tekening, evenals de stijlen voor de weergave van onze kaart en de container van onze matrix:
2- We definiëren globale variabelen voor gebruik binnen de reikwijdte van onze code en in de functie initializeMap () We initialiseren de arrays om de breedte- en lengtegraad van zowel de oorsprong als de bestemming te verwerken:
var-kaart; var originLatLon; var bestemmingLatLon; var afstandMatrixService; var markerCount; var arrayResultaat; functie initializeMap () {originLatLon = []; bestemmingLatLon = []; 3- Vervolgens verkrijgen we in dezelfde functie de knop en de gebeurtenishandler ervoor, bovendien initialiseren we het object voor de service van AfstandMatrixService evenals de teller voor de markeringen en wijs het resultaat van de array toe aan een container-div:
var generationBtnMatrix = document.getElementById ('generateMatrix'); genereerBtnMatrix.addEventListener ('klik', functie () {MatrixRequest ();}); distanceMatrixService = nieuwe google.maps.DistanceMatrixService (); markerCount = 0; resultaatarray = document.getElementById ('resultatenarray'); 4- We nemen de conventionele opties van de kaart op, zoals het midden, de zoom en het type basis, we verkrijgen het element ZON en we instantiëren de methode Kaart:
google.maps.visualRefresh = waar; var mapOptions = {center: nieuwe google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); kaart = nieuwe google.maps.Map (mapElement, mapOptions); 5- Net als in de vorige oefening hebben we de tekenmanager gemaakt waarmee we markeringen kunnen tekenen, hiervoor zullen we een instantie maken van TekeningManager en we bieden de nodige opties, schakelen deze in en voegen de luisteraar toe voor het evenement:
var drawingManager = nieuw google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); tekeningManager.setMap (kaart); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Hierna voeren we de validaties uit om het aantal toegestane bestemmingen te beperken en stellen we de pictogrammen in die we gaan gebruiken voor onze bladwijzers:
markerCount ++; if (markerCount> 10) {alert ("Geen bestemmingen meer toegestaan"); tekeningManager.setMap (null); marker.setMap (null); opbrengst; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 7- Nu hoeven we alleen nog onze functies te creëren om de verzoeken af te handelen die zijn gedaan aan de dienst van afstandMatrixService, maken we eerst degene die de aanvraageigenschap zal voorbereiden:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({oorsprong: LatinSource, bestemmingen: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- We creëren de functie voor de terugroepactie en waarmee we het antwoord van de service kunnen verkrijgen en waarin we de nodige validaties zullen opnemen voor het geval de service de fout niet op de beste manier afhandelt:
functie getResultMatrix (resultaat, status) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = resultaat.destinationAddresses; for (var i = 0, l = originAddresses.length; i <l; i ++) {var elements = result.rows [i] .elements; for (var j = 0, m = elementen.lengte; j <m; j ++) {var originAddress = originAddresses [i]; var bestemmingsadres = bestemmingsadressen [j]; var element = elementen [j]; var afstand = element.afstand.tekst; var duur = element.duur.tekst; resultatenDivMatrix (originAddress, destinationAddress, afstand, duur, i, j); }}} else {alert ('Kon array niet ophalen:' + status); } 9- Daarnaast maken we de functie die de verkregen resultaten in de bijbehorende div schrijft:
functionDivMatrixResults (originAddress, destinationAddress, afstand, duur, originAddressCount, destinationAddressCount) {var bestaandeContent = resultResult.innerHTML; var nieuweInhoud; nieuweInhoud = 'Oorsprong '+ countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; nieuweInhoud + = 'Bestemming '+ countLetters (destinationAddressCount) +':
'; newContent + = bestemmingsadres + '
'; nieuweInhoud + = 'Lotsbestemming: '+ afstand +'
'; nieuweInhoud + = 'Lotsbestemming: '+ duur +'
'; nieuweInhoud + = '
'; resultArray.innerHTML = bestaande inhoud + nieuwe inhoud; } 9- Eindelijk in onze Javascript We behandelen de tellers in een functie om de naam terug te geven die overeenkomt met de teller van de markering die we plaatsen:
functie countLetters (count) {switch (count) {case 0: return 'Stripwinkel'; geval 1: retour 'Video Game Store'; geval 2: retour 'Stripwinkel'; geval 3: retour 'Stripwinkel'; geval 4: retour 'Video Game Store'; standaard: retourneert null; }} 10- We sluiten de bijbehorende tags en voegen het gedeelte van de code toe HTML om ons voorbeeld aan te vullen:
Gebruik afstandsmatrix
11- We voeren ons voorbeeld uit in de browser en om de werking van onze kaart te visualiseren, zullen we 4 interessante punten plaatsen en op de knop drukken Genereer afstandsmatrix:
VERGROTEN
Om deze tutorial af te ronden, zullen we de service implementeren Straatbeeld, Het is een vrij eenvoudig voorbeeld, maar dat toegevoegd aan de andere beschikbare services, zal onze kaarten doen opvallen boven de andere, laten we eens kijken wat we moeten doen om deze service te implementeren:
1- We nemen de API op en definiëren de bijbehorende stijlen, in dit voorbeeld zullen we de tekenbibliotheek niet gebruiken, dus deze wordt niet opgenomen:
2- We definiëren onze globale variabelen en creëren onze functie initializeMap () Met de conventionele opties, het midden van onze kaart, zoom en type basis, verkrijgen we het element ZON en we instantiëren de methode Kaart:
var-kaart; var geocoder; var streetView; functie initializeMap () {popup = nieuwe google.maps.InfoWindow (); geocoder = nieuwe google.maps.Geocoder (); google.maps.visualRefresh = waar; var mapOptions = {center: nieuwe google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); kaart = nieuwe google.maps.Map (mapElement, mapOptions); 3- Binnen onze functie noemen we de dienst van Straatbeeld en daarna maken we een functie om de opties zoals locatie en gezichtspunt in te stellen:
streetView = kaart.getStreetView (); } functie setOptionsStreetView (locatie) {streetView.setPosition (locatie); streetView.setPov ({heading: 0, itch: 10}); } 4- Ten slotte creëren we de functies om te kunnen schakelen tussen de conventionele weergave van de kaart en de Streerweergave, laten we eens kijken hoe deze eruit zien:
functie showMap () {streetView.setVisible (false); } functie showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (waar); } 5- We sluiten de bijbehorende tags en voegen het gedeelte van de code toe HTML om ons voorbeeld aan te vullen:
Kaart met Street View
6- We voeren ons voorbeeld uit in de browser en drukken op de knop Streetview weergeven om de functionaliteit te visualiseren zoals we kunnen zien in de volgende afbeelding:
VERGROTEN
Hiermee beëindigen we deze tutorial, omdat we de services in de konden waarderen Google Maps Javascript-API Ze stellen ons in staat om de functionaliteiten van onze kaarten veel meer uit te breiden, en het te positioneren als een optie om rekening mee te houden in de systemen die we implementeren die locatie- en tijd- en / of afstandsberekeningen moeten gebruiken.
Ik herinner je aan deze tutorial, die ook van pas zal komen: Leer het gebruik van vectoren in Google MapsVond 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
