Satura rādītājs
Pakalpojumi, ko piedāvā Google Maps Javascript API ir tikpat dažādi, cik funkcionāli, tiem piemīt kvalitāte, kas atšķir Google kartes No konkurentiem šie pakalpojumi parasti darbojas asinhroni, kas ļauj pieprasījumu iesniegt ārējam serverim, un atbilžu apstrādes metode ir atbildīga par atbilžu apstrādi.Viena no šo pakalpojumu priekšrocībām ir tā, ka tie ir pilnībā saderīgi ar API klasēm un objektiem. Mēs varam no konsultēšanās ar konkrēta mūsu kartes punkta adresi līdz pat ielas attēla ieviešanai.
Pirms pārejam pie piemēriem, apskatīsim dažus no vissvarīgākajiem pakalpojumiem, kurus mēs izmantosim šajā apmācībā.
Ģeogrāfiskā kodēšanaŠis pakalpojums ļauj mums pārveidot kopējās adreses par ģeogrāfiskām koordinātām, pamatojoties uz punkta platumu un garumu, tas ļauj mums izvietot marķierus vai novietot karti, lai veiktu šīs darbības, API nodrošina klasi ar nosaukumu ģeokodētājs ().
Attāluma matricaŠis pakalpojums palīdz mums aprēķināt attālumu un maršruta ilgumu starp vairākiem punktiem, ko mūsdienās plaši izmanto, tāpēc mums ir mērķis google.maps.DistanceMatrixService un ar to saistītās metodes.
Ielas skatsapkalpošana Ielas skats vai ielu skats piedāvā 360 grādu panorāmas skatus apgabalos, kur tam ir pārklājums, kas mūsu kartes bez šaubām izceļ.
Atcerieties, ka šeit es detalizēti aprakstīju API darbību un notikumu apstrādi pakalpojumā Google Maps, kā arī ievadā, lai izprastu Javascript API pakalpojumā Google Maps.
Lai izpildītu šo piemēru, mēs izmantosim pakalpojumu ģeokodētājs () Bet, kā jau minējām, tas ļauj mums pārveidot adresi par koordinātu, tas ir labi, bet parastajam lietotājam tas ir kaut kas tāds, kam nav lielas nozīmes, tāpēc mēs izmantosim reversais ģeokodētājs lai ar vienu klikšķi iegūtu mums nepieciešamo adresi. Apskatīsim soļus, kas mums jāveic:
1- Pirmkārt, kā mēs jau zinām, mēs iekļaujam API, neaizmirstot izmantot mūsu akreditācijas datus, turklāt mēs iekļausim bibliotēku zīmējums kas ļaus mums īstenot zīmēšanas marķieru funkcionalitāti, mēs savienojam šo bibliotēku ar akreditācijas datiem ar simbolu &, kā redzēsim tālāk:
2- Mēs nevaram aizmirst par kartes stiliem, kas tai piešķirs lapas vizualizācijas veidu, kā arī definēsim globālos mainīgos, kuriem būs globāla darbības joma visās mūsu koda metodēs:
var karte; var ģeokodētājs var uznirstošais logs;
3- Pēc tam mēs definējam savu metodi initializeMap () kur pirmā lieta, ko mēs darīsim, ir pasludināt mūsu tipa objektu ģeokodētājs palīdz mums no klases Ģeokodētājs () un ar InfoWindow uznirstošā objekta objekts, kas ekrānā parādīs adresi:
function initializeMap () {geocoder = new google.maps.Geocoder (); popup = new google.maps.InfoWindow (); 4- Mēs iekļaujam parastās kartes opcijas, piemēram, centru, tālummaiņu un bāzes veidu, mēs iegūstam elementu SAULE un mēs parādām metodi Karte:
google.maps.visualRefresh = true; var mapOptions = {centrs: jauns google.maps.LatLng (40.41678, -3.70379), tālummaiņa: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); karte = new google.maps.Map (mapElement, mapOptions); 5- Tagad mēs izveidojam zīmēšanas pārvaldnieku, kas ļaus mums uzzīmēt marķierus, tāpēc mēs izveidosim piemēru DrawingManager, mēs to redzam lietotāja saskarnē un izvēlamies, kuri režīmi tiks parādīti vadīklā un kādā stāvoklī tie būs:
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- Tagad mēs iespējojam jaunizveidoto funkcionalitāti, pievienojam klausītāju mūsu pasākumam un uzstāšanās brīdim reversais ģeokodētājs ar metodi iegūstam sava marķiera atrašanās vietu platuma un garuma grādos getPosition ():
drawingManager.setMap (karte); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- Lai pabeigtu reversais ģeokodētājs mēs izmantosim pakalpojumu ģeokods () un mēs noteiksim nosacījumu, lai pārbaudītu, vai pakalpojums atgriež derīgu atbildi, ja ne, mēs to apstrādājam, lai lietotājs zinātu, ka tā neizdevās, un, ja rezultāts ir pareizs, mēs izsaucam savu metodi Rādīt adresi ():
geocoder.geocode ({'latLng': markerPosition}, funkcija (rezultāti, statuss) {if (status == google.maps.GeocoderStatus.OK) {if (rezultāti) {ShowAddress (rezultāti [0], marķieris);}} else {alert ("Pakalpojums neizdevās:" + statuss);}}); 8- Visbeidzot, mums tikai jāizveido metode Rādīt adresi () kas saņems mūsu reversā ģeokodera rezultātu un marķiera pozīciju, ar to mēs varam izveidot centru un bez problēmām parādīt formatētās adreses informāciju:
funkcija ShowAddress (rezultāts, marķieris) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adrese: '+ rezultāts.formatēts_adrese; popup.setContent (popupContent); popup.open (karte, marķieris); } 9- Mēs aizveram atbilstošos tagus un pievienojam HTML koda daļu, lai pabeigtu mūsu piemēru:
Atrodiet adresi kartē ar vienu klikšķi
10- Mēs izpildām pārlūkprogrammā un noklikšķinām uz jebkura mūsu kartes punkta, un mēs iegūsim adresi, kas tiek parādīta uznirstošajā logā, un tam vajadzētu izskatīties šādi:
PALIELINĀT
Google Maps Javascript API sniedz mums diezgan noderīgus pakalpojumus, viens no tiem ir attāluma matrica kas ļauj mums aprēķināt attālumu un laiku starp vairākiem punktiem, funkcionalitāti, ko mēs varam izmantot, lai ieviestu dažādus risinājumus jebkurā biznesā, sākot no piegādes laiku aprēķināšanas vai optimālākā maršruta noteikšanas starp dažādiem punktiem. Apskatīsim darbības, kas mums jāveic, lai ieviestu šo funkcionalitāti starp mūsu kartēm.
1- Mēs iekļaujam savu API kopā ar bibliotēku zīmējums, kā arī mūsu kartes un mūsu matricas konteinera attēlošanas stili:
2- Mēs definējam globālos mainīgos izmantošanai visā mūsu koda darbības jomā un funkcijā initializeMap () Mēs inicializējam masīvus, lai apstrādātu gan izcelsmes, gan galamērķa platumu un garumu:
var karte; var originLatLon; var galamērķisLatLon; var distanceMatrixService; var markerCount; var arrayResult; funkcija initializeMap () {originLatLon = []; galamērķisLatLon = []; 3- Tad tajā pašā funkcijā mēs iegūstam pogu un notikumu apstrādātāju, kā arī inicializējam objektu pakalpojumam DistanceMatrixService kā arī marķieru skaitītāju un piešķir masīva rezultātu konteineram div:
vargeneBtnMatrix = document.getElementById ('createMatrix'); generatedBtnMatrix.addEventListener ('click', function () {MatrixRequest ();}); distanceMatrixService = new google.maps.DistanceMatrixService (); markerCount = 0; rezultātu masīvs = document.getElementById ('rezultātu masīvs'); 4- Mēs iekļaujam parastās kartes opcijas, piemēram, centru, tālummaiņu un bāzes veidu, mēs iegūstam elementu SAULE un mēs parādām metodi Karte:
google.maps.visualRefresh = true; var mapOptions = {centrs: jauns google.maps.LatLng (40.41678, -3.70379), tālummaiņa: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); karte = new google.maps.Map (mapElement, mapOptions); 5- Tāpat kā iepriekšējā uzdevumā, mēs izveidojām zīmēšanas pārvaldnieku, kas ļaus mums uzzīmēt marķierus, tāpēc mēs izveidosim piemēru DrawingManager un mēs piedāvājam nepieciešamās iespējas, iespējojiet to un pievienojiet notikuma klausītāju:
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 (karte); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Pēc tam mēs veicam apstiprināšanu, lai ierobežotu atļauto galamērķu skaitu, un iestatām ikonas, kuras mēs izmantosim grāmatzīmēm:
markerCount ++; if (markerCount> 10) {alert ("Vairāk galamērķu nav atļauts"); drawingManager.setMap (null); marker.setMap (null); atgriešanās; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / komiksi.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 7- Tagad mums tikai jāizveido savas funkcijas, lai apstrādātu dienestam iesniegtos pieprasījumus distanceMatrixService, vispirms mēs izveidojam to, kas sagatavos pieprasījuma īpašumu:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({izcelsme: LatinSource, galamērķi: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Mēs izveidojam atzvanīšanas funkciju, kas ļaus mums saņemt pakalpojuma atbildi un kurā iekļausim nepieciešamās validācijas gadījumā, ja pakalpojums nevarēs labot kļūdu vislabākajā veidā:
funkcija getResultMatrix (rezultāts, statuss) {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; par (var j = 0, m = elementi.garums; j <m; j ++) {var originAddress = originAddresses [i]; var galamērķa adrese = galamērķa adreses [j]; var elements = elementi [j]; var distance = elements.distance.text; var ilgums = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, distance, duration, i, j); }}} else {alert ('Nevar iegūt masīvu:' + statuss); } 9- Turklāt mēs izveidojam funkciju, kas ierakstīs iegūtos rezultātus attiecīgajā div:
functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destivalAddressCount) {var esošaisContent = resultResult.innerHTML; var newContent; newContent = 'Origin ' + countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; newContent + = 'Galamērķis ' + countLetters (destinationAddressCount) +':
'; newContent + = destinationAddress + '
'; newContent + = 'Liktenis: ' + attālums +'
'; newContent + = 'Liktenis: " + ilgums +"
'; newContent + = '
'; resultArray.innerHTML = esošais saturs + jauns saturs; } 9- Visbeidzot mūsu Javascript Mēs apstrādājam skaitītājus, lai atgrieztu nosaukumu, kas atbilst mūsu novietotā marķiera skaitītājam:
function countLetters (skaits) {slēdzis (skaits) {case 0: return 'Comics Store'; 1. gadījums: atgriezt “Videospēļu veikals”; 2. gadījums: atgriezt “Komiksu veikals”; 3. gadījums: atgriezt “Komiksu veikals”; 4. gadījums: atgriezt “Videospēļu veikals”; noklusējums: return null; }} 10- Mēs aizveram atbilstošos tagus un pievienojam koda daļu HTML lai pabeigtu mūsu piemēru:
Izmantojiet attāluma matricu
11- Mēs izpildām savu piemēru pārlūkprogrammā un, lai vizualizētu mūsu kartes darbību, mēs ievietosim 4 interesējošos punktus un nospiedīsim pogu Izveidot attāluma matricu:
PALIELINĀT
Lai pabeigtu šo apmācību, mēs ieviesīsim pakalpojumu Ielas skats, Tas ir diezgan vienkāršs piemērs, taču, pievienojot citiem pieejamajiem pakalpojumiem, mūsu kartes izceltos pārējās, redzēsim, kas mums jādara, lai ieviestu šo pakalpojumu:
1- Mēs iekļaujam API un definējam atbilstošos stilus, šajā piemērā mēs neizmantosim zīmējumu bibliotēku, tāpēc tā netiks iekļauta:
2- Mēs definējam savus globālos mainīgos un izveidojam savu funkciju initializeMap () Izmantojot parastās iespējas, mūsu kartes centru, tālummaiņu un bāzes veidu, mēs iegūstam elementu SAULE un mēs parādām metodi Karte:
var karte; var ģeokodētājs; var streetView; function initializeMap () {popup = new google.maps.InfoWindow (); geocoder = new google.maps.Geocoder (); google.maps.visualRefresh = true; var mapOptions = {centrs: jauns google.maps.LatLng (40.41678, -3.70379), tālummaiņa: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); karte = new google.maps.Map (mapElement, mapOptions); 3- Savas funkcijas ietvaros mēs saucam par pakalpojumu Ielas skats un pēc tam mēs izveidojam funkciju, lai iestatītu tās iespējas, piemēram, atrašanās vietu un skatu punktu:
streetView = map.getStreetView (); } funkcija setOptionsStreetView (atrašanās vieta) {streetView.setPosition (atrašanās vieta); streetView.setPov ({virsraksts: 0, nieze: 10}); } 4- Visbeidzot, mēs izveidojam funkcijas, lai varētu pārslēgties starp parasto kartes skatu un Streer skats, redzēsim, kā tie izskatās:
function showMap () {streetView.setVisible (false); } funkcija showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (true); } 5- Mēs aizveram atbilstošos tagus un pievienojam koda daļu HTML lai pabeigtu mūsu piemēru:
Karte ar Ielas attēlu
6- Mēs izpildām savu piemēru pārlūkprogrammā un nospiediet pogu Rādīt Ielas attēlu lai vizualizētu funkcionalitāti, kā mēs varam redzēt šajā attēlā:
PALIELINĀT
Ar to mēs beidzam šo apmācību, jo varējām novērtēt pakalpojumā esošos pakalpojumus Google Maps Javascript API Tie ļauj mums daudz vairāk paplašināt mūsu karšu funkcijas, pozicionējot to kā iespēju ņemt vērā mūsu ieviestajās sistēmās, kurām ir jāizmanto atrašanās vietas un laika un / vai attāluma aprēķini.
Es atgādinu jums šo pamācību, kas arī noderēs: Uzziniet par vektoru izmantošanu pakalpojumā Google MapsVai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
