Turinys
Paslaugos, kurias siūlo „Google“ žemėlapių „Javascript“ API yra tiek įvairūs, tiek funkcionalūs, jie pasižymi kokybe Google žemėlapiai Iš konkurentų šios paslaugos paprastai veikia asinchroniškai, todėl užklausą galima pateikti išoriniam serveriui, o atsakymų apdorojimo metodas yra atsakingas.Viena iš šių paslaugų privalumų yra ta, kad jos visiškai suderinamos su API klasėmis ir objektais. Galime pradėti nuo konkretaus žemėlapio taško adreso iki gatvės vaizdo įgyvendinimo.
Prieš pereidami prie pavyzdžių, pažiūrėkime kai kurias svarbiausias paslaugas, kurias naudosime šioje pamokoje.
Geografinis kodavimasŠi paslauga leidžia mums paversti įprastus adresus į geografines koordinates, atsižvelgiant į taško platumą ir ilgumą, tai leidžia mums įdėti žymeklius arba išdėstyti žemėlapį, kad atliktume šias operacijas, API suteikia klasę, vadinamą geokoderis ().
Atstumo matricaŠi paslauga padeda mums apskaičiuoti atstumą ir maršruto trukmę tarp kelių taškų, tai šiandien plačiai naudojama, todėl mes turime google.maps.DistanceMatrixService ir su juo susiję metodai.
Gatvės vaizdasPaslauga Gatvės vaizdas arba „Street View“ siūlo 360 laipsnių panoraminius vaizdus tose vietose, kur jis yra aprėptas, ir tai leis mūsų žemėlapiams išsiskirti be jokios abejonės.
Atminkite, kad čia išsamiai aprašiau API veikimą ir įvykių tvarkymą „Google“ žemėlapiuose bei įvadą, kad suprastumėte „Javascript“ API „Google“ žemėlapiuose.
Norėdami įgyvendinti šį pavyzdį, naudosime paslaugą geokoderis () Bet kaip jau minėjome, tai leidžia mums paversti adresą į koordinatę, tai gerai, tačiau įprastam vartotojui tai yra nematanti naudos, todėl mes naudosime atvirkštinis geokoderis norėdami gauti mums reikalingą adresą vienu paspaudimu. Pažiūrėkime, kokius veiksmus turime atlikti:
1- Pirmiausia, kaip jau žinome, įtraukiame API, nepamiršdami naudoti savo kredencialų, be to, įtraukiame biblioteką piešimas tai leis mums įgyvendinti piešimo žymeklių funkcionalumą, mes sujungiame šią biblioteką su savo kredencialais su simboliu &, kaip matysime žemiau:
2- Negalime pamiršti žemėlapio stilių, kurie suteiks jam vizualizacijos tipą puslapyje, taip pat apibrėš bendrus kintamuosius, kurie turės visuotinę taikymo sritį visais mūsų kodo metodais:
var žemėlapis; var geokoderis var popup;
3- Po to mes apibrėžiame savo metodą initializeMap () kur pirmas dalykas, kurį mes padarysime, yra paskelbti savo tipo objektą geokoderis padeda mums iš pamokos Geokoderis () ir su „InfoWindow“ iššokančiojo objekto, kuris ekrane parodys adresą:
function initializeMap () {geocoder = naujas google.maps.Geocoder (); popup = naujas google.maps.InfoWindow (); 4- Mes įtraukiame įprastas žemėlapio parinktis, tokias kaip centras, mastelio keitimas ir pagrindo tipas, gauname elementą SAULĖ ir mes parodome metodą Žemėlapis:
google.maps.visualRefresh = tiesa; var mapOptions = {centras: naujas google.maps.LatLng (40.41678, -3.70379), mastelis: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Dabar mes sukuriame piešimo tvarkyklę, kuri leis mums piešti žymeklius, todėl mes padarysime pavyzdį DrawingManager, mes jį matome vartotojo sąsajoje ir pasirenkame, kurie režimai bus rodomi valdiklyje ir kokioje padėtyje jie bus:
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- Dabar įgaliname naujai sukurtą funkcionalumą, pridedame klausytoją savo renginiui ir pasirodymui atvirkštinis geokoderis metodu gauname savo žymeklio platumos ir ilgumos padėtį getPosition ():
drawingManager.setMap (žemėlapis); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker)) {var markerPosition = marker.getPosition (); 7- Norėdami užbaigti atvirkštinis geokoderis pasinaudosime paslauga geokodas () ir mes padarysime sąlygą, kad patikrintume, ar paslauga pateikia teisingą atsakymą, jei ne, mes jį tvarkome, kad vartotojas žinotų, jog jis nepavyko, ir jei rezultatas teisingas, mes vadiname savo metodą Rodyti adresą ():
geocoder.geocode ({'latLng': markerPosition}, funkcija (rezultatai, būsena) {if (status == google.maps.GeocoderStatus.OK) {if (results) {ShowAddress (results [0], marker);}} else {alert ("Paslauga nepavyko:" + būsena);}}); 8- Galiausiai, mes turime tik sukurti metodą Rodyti adresą () kuris gaus mūsų atvirkštinio geokoderio rezultatą ir žymeklio padėtį, tokiu būdu mes galime nustatyti centrą ir be jokių problemų rodyti suformatuoto adreso informaciją:
funkcija ShowAddress (rezultatas, žymeklis) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adresas: '+ result.formatted_address; popup.setContent (popupContent); popup.open (žemėlapis, žymeklis); } 9- Uždarome atitinkamas žymas ir pridedame HTML kodo dalį, kad užbaigtume pavyzdį:
Suraskite adresą žemėlapyje vienu paspaudimu
10- Vykdome savo naršyklėje ir spustelėdami bet kurį mūsų žemėlapio tašką, gausime adresą, kuris bus rodomas iššokančiajame lange, kuris turėtų atrodyti taip:
DIDELIS
The „Google“ žemėlapių „Javascript“ API teikia mums gana naudingas paslaugas, viena iš jų yra atstumo matrica Tai leidžia mums apskaičiuoti atstumą ir laiką tarp kelių taškų - tai funkcija, kurią galime panaudoti įgyvendindami skirtingus sprendimus bet kuriame versle, pradedant pristatymo laiko skaičiavimu arba nustatant optimaliausią maršrutą tarp įvairių taškų. Pažiūrėkime, kokių veiksmų turime imtis, kad įgyvendintume šią funkciją tarp savo žemėlapių.
1- Mes įtraukiame savo API kartu su biblioteka piešimas, taip pat mūsų žemėlapio ir matricos sudėtinio rodymo stiliai:
2- Mes apibrėžiame visuotinius kintamuosius, skirtus naudoti visoje mūsų kodo srityje ir funkcijoje initializeMap () Mes inicijuojame masyvus, kad būtų galima valdyti tiek kilmės, tiek paskirties platumą ir ilgumą:
var žemėlapis; var originLatLon; var paskirtiesLatLon; var distanceMatrixService; var markerCount; var arrayResult; funkcija initializeMap () {originLatLon = []; paskirtiesLatLon = []; 3- Tada toje pačioje funkcijoje mes gauname mygtuką ir įvykių tvarkyklę, papildomai inicijuojame objektą, kad jis būtų teikiamas DistanceMatrixService taip pat žymeklių skaitiklis ir priskirkite masyvo rezultatą konteineriui div:
vargeneBtnMatrix = document.getElementById ('generuoti matrica'); geneBtnMatrix.addEventListener ('spustelėkite', function () {MatrixRequest ();}); distanceMatrixService = naujas google.maps.DistanceMatrixService (); markerCount = 0; rezultatų masyvas = document.getElementById ('rezultatų masyvas'); 4- Mes įtraukiame įprastas žemėlapio parinktis, tokias kaip centras, mastelio keitimas ir pagrindo tipas, gauname elementą SAULĖ ir mes parodome metodą Žemėlapis:
google.maps.visualRefresh = tiesa; var mapOptions = {centras: naujas google.maps.LatLng (40.41678, -3.70379), mastelis: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Kaip ir ankstesniame pratime, mes sukūrėme piešimo tvarkyklę, kuri leis mums piešti žymeklius, todėl mes padarysime pavyzdį DrawingManager ir mes pateikiame būtinas parinktis, įgaliname ją ir įtraukiame įvykio klausytoją:
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 (žemėlapis); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Po to mes atliekame patvirtinimus, kad apribotume leidžiamų paskirties vietų skaičių, ir nustatome piktogramas, kurias ketiname naudoti savo žymėms:
markerCount ++; if (markerCount> 10) {alert ("Daugiau paskirties vietų neleidžiama"); drawingManager.setMap (null); marker.setMap (null); grįžti; } if (markerCount% 2 === 0) {targetLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 7- Dabar turime tik sukurti savo funkcijas, kad galėtume patenkinti tarnybos prašymus distanceMatrixService, pirmiausia sukuriame tą, kuris parengs užklausos ypatybę:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({ištakos: LatinSource, paskirties vietos: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Mes sukuriame atgalinio ryšio funkciją, kuri leis mums gauti paslaugos atsakymą ir į kurią įtrauksime reikiamus patvirtinimus, jei paslauga nesugebės geriausiai išspręsti klaidos:
funkcija getResultMatrix (rezultatas, būsena) {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 paskirties adresas = paskirties adresas [j]; var element = elementai [j]; var atstumas = elementas.distance.text; var trukmė = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, distance, duration, i, j); }}} else {alert ('Nepavyko gauti masyvo:' + būsena); } 9- Be to, sukuriame funkciją, kuri įrašys gautus rezultatus į atitinkamą skyrių:
functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount) {var esamų turinys = rezultatasResult.innerHTML; var newContent; newContent = 'Origin ' + countLetters (originAddressCount) +':
“; newContent + = originAddress + '
“; newContent + = 'Paskirties vieta „ + countLetters (destinationAddressCount) +“:
“; newContent + = destinationAddress + '
“; newContent + = 'Likimas: ' + atstumas +'
“; newContent + = 'Likimas: „ + trukmė +“
“; newContent + = '
“; resultArray.innerHTML = esamasContent + newContent; } 9- Pagaliau mūsų Javascript Mes tvarkome skaitiklius, norėdami grąžinti pavadinimą, atitinkantį mūsų dedamo žymeklio skaitiklį:
function countLetters (count) {switch (count) {case 0: return 'Comics Store'; 1 atvejis: grąžinkite „Vaizdo žaidimų parduotuvė“; 2 atvejis: grąžinkite „Komiksų parduotuvę“; 3 atvejis: grąžinkite „Komiksų parduotuvę“; 4 atvejis: grąžinkite „Vaizdo žaidimų parduotuvė“; numatytasis: return null; }} 10- Uždarome atitinkamas žymas ir pridedame kodo dalį HTML Norėdami užbaigti mūsų pavyzdį:
Naudokite atstumo matricą
11- Mes vykdome savo pavyzdį naršyklėje ir norėdami vizualizuoti mūsų žemėlapio veikimą, įdėsime 4 lankytinas vietas ir paspausime mygtuką Sukurti atstumo matricą:
DIDELIS
Norėdami baigti šią pamoką, įdiegsime paslaugą Gatvės vaizdas, Tai gana paprastas pavyzdys, tačiau, pridėjus prie kitų galimų paslaugų, mūsų žemėlapiai išsiskirs aukščiau kitų, pažiūrėkime, ką turime padaryti, kad įdiegtume šią paslaugą:
1- Įtraukiame API ir apibrėžiame atitinkamus stilius, šiame pavyzdyje nenaudosime piešimo bibliotekos, todėl ji nebus įtraukta:
2- Mes apibrėžiame savo globalius kintamuosius ir sukuriame savo funkciją initializeMap () Naudodami įprastas parinktis, žemėlapio centrą, mastelį ir pagrindo tipą, mes gauname elementą SAULĖ ir mes parodome metodą Žemėlapis:
var žemėlapis; var geokoderis; var streetView; function initializeMap () {popup = new google.maps.InfoWindow (); geocoder = new google.maps.Geocoder (); google.maps.visualRefresh = tiesa; var mapOptions = {centras: naujas google.maps.LatLng (40.41678, -3.70379), mastelis: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 3- Pagal savo funkciją mes vadiname paslaugą Gatvės vaizdas ir po to mes sukuriame funkciją, kad nustatytume jos parinktis, tokias kaip vieta ir požiūris:
streetView = map.getStreetView (); } funkcija setOptionsStreetView (vieta) {streetView.setPosition (vieta); streetView.setPov ({antraštė: 0, niežulys: 10}); } 4- Galiausiai sukuriame funkcijas, kad galėtume perjungti įprastą žemėlapio vaizdą į Streer View, pažiūrėkime, kaip jie atrodo:
function showMap () {streetView.setVisible (false); } funkcija showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (tiesa); } 5- Uždarome atitinkamas žymas ir pridedame kodo dalį HTML Norėdami užbaigti mūsų pavyzdį:
Žemėlapis su „Street View“
6- Mes paleidžiame savo pavyzdį naršyklėje ir paspaudžiame mygtuką Rodyti „Street View“ vizualizuoti funkcionalumą, kaip matome šiame paveikslėlyje:
DIDELIS
Tuo baigiame šią mokymo programą, nes galėjome įvertinti paslaugas, esančias „Google“ žemėlapių „Javascript“ API Jie leidžia mums dar labiau išplėsti savo žemėlapių funkcijas, priskiriant jį kaip galimybę atsižvelgti į mūsų diegiamas sistemas, kurioms reikia naudoti vietos ir laiko bei (arba) atstumo skaičiavimus.
Primenu jums šią pamoką, kuri taip pat pravers: išmokite naudoti vektorius „Google“ žemėlapiuoseAr jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
