Sadržaj
The Javascript API za Google karte Izuzetno je moćan jer ne samo da omogućuje stvaranje karata kao takvih, već možemo otići i korak dalje proširivanjem njegovih funkcionalnosti i upotrebom vektora za dodavanje zanimljivih mjesta, padajućih prozora, linija i simulacije ruta.Još jedna od prednosti karata koje implementiramo i ako smo ikada radili s Javascriptom su događajima, koji su jezgra jezika i zaduženi su za upravljanje interakcijom korisnika s web lokacijom, u ovom konkretnom slučaju interakcijom s našom kartom.
Prije nego što krenemo na praksu, prvo moramo upoznati neke od teorija iza događaja koje obrađuje API, to koristi imenski prostor google.maps.event raditi s njima. Ima statičke metode za osluškivanje događaja definiranih u API -ju i upravljačkom programu addListener () kako bi ih registrirali.
Znajući to, pogledajmo neke od najvažnijih događaja dostupnih u API -ju i koje ćemo koristiti u našim primjerima:
centar_promijenjenOvaj se događaj pokreće kad se promijeni svojstvo središta karte.
klikOvaj se događaj pokreće kada korisnik klikne na kartu, važno je napomenuti da isključuje klikove na markere ili prozore s informacijama.
opterećenjeOvaj se događaj ponavlja više puta kada korisnik povuče kartu.
pokret mišaOvaj se događaj pokreće kada korisnik pomiče miša bilo gdje u spremniku karte.
desni klikOvaj se događaj pokreće kada se pokrene događaj kontekstnog izbornika DOM -a.
zoom_changedOvaj se događaj pokreće kad se promijeni svojstvo zumiranja karte.
Važno je napomenuti da iako ti događaji mogu izgledati kao standardni događaji iz SUNCE oni nisu, oni su dio API za Google karte. Time se izbjegava problem u kojem preglednici obrađuju različite vrste događaja za SUNCE.
Nakon što ste već vidjeli događaje koje najviše koristi API Idemo na praksu kako bismo demonstrirali njihovu upotrebu u izradi naših karata, prvi primjer ovog vodiča bit će fokusiran na događaje povezane s promjenom svojstava karte, što će nam omogućiti dobivanje sinkronizirane funkcionalnosti karte, tj. , imati karte s različitim osnovama koje prikazuju iste podatke bez obzira na promjene u njihovom središtu ili u njihovom zumiranju.
Pogledajmo korake koje moramo slijediti da bismo postigli ovaj cilj:
1- Prvo stvaramo novu datoteku koju ćemo nazvati synchronized_maps.html i provodimo uključivanje API -ja, zajedno sa stilovima koje će imati spremnik naših karata, važno je definirati globalne varijable karata jer ćemo ih morati koristiti u cijelom opsegu programa:
var karta1, karta2;
2- Kao što smo već spomenuli, sinkronizirat ćemo dvije karte s različitim osnovama, za to moramo stvoriti dvije funkcije koje ih inicijaliziraju. Ove će funkcije biti prilično slične onima koje smo savladali u prošlim vodičima, no imat će rukovanje događajima za postizanje funkcije sinkronizacije, pogledajmo kod prve funkcije:
funkcija initializeMap1 () {var mapOptions = {centar: novi google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map1 = nova google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (map1, 'center_changed', function () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', function () {map2.setZoom (map1.getZoom ());}); } Kao što vidimo, imamo uobičajene opcije naše karte za definiranje središta, zumiranja i baze, što je u ovom slučaju KARTA, zatim postavljamo opcije našoj karti i na kraju naše događaje koji su odgovorni za dobivanje vrijednosti svojstava karte broj 1 i njihovo postavljanje na kartu broj 2, za to ćemo koristiti događaje centar_promijenjen Y zoom_changed to nam omogućuje sinkronizaciju.
3- Zatim moramo stvoriti svoju funkciju za inicijalizaciju druge karte, kôd je sličan prethodnom, međutim događaji će se aktivirati s karte 2 na broj 1, a baza će biti HIBRID pokazati razliku između oboje:
funkcija initializeMap2 () {var mapOptions2 = {centar: novi google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); map2 = nova google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (map2, 'center_changed', function () {setTimeout (function () {map1.setCenter (map2.getCenter ());}, 10);}); google.maps.event.addListener (map2, 'zoom_changed', function () {setTimeout (function () {map1.setZoom (map2.getZoom ());}, 10);}); } 4- Na kraju stvaramo funkciju za instanciranje karata koja će nam omogućiti da napravimo instancu oboje, mi gradimo našu HTML a istu klasu smo stavili u divs koji će sadržavati naše karte:
funkcija initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (prozor, 'učitavanje', inicijaliziranje karti); Sinkronizirane karte
Pogledajmo kako izgledaju naše sinkronizirane karte kada izvodimo vježbu u pregledniku:
POVEĆAJTE
POVEĆAJTE
1- Izrađujemo novu datoteku pod nazivom get_coordinates.html i zajedno sa stilovima uključujemo i naš API:
2- Zatim stvaramo funkciju initializeMap () kao i obično, ali ovo će imati nešto drugačije i definicija je događaja klik u addListener zajedno s implementacijom dijaloga koji će nam pružiti informacije o zemljopisnoj širini i dužini mjesta na koje kliknemo, da vidimo:
google.maps.event.addListener (karta, 'klik', funkcija (e) {if (infowindow! = null) infowindow.close (); infowindow = novi google.maps.InfoWindow ({content: 'Koordinate miša:
Geografska širina: ' + e.latLng.lat () +'
Duljina: '+ e.latLng.lng (), položaj: e.latLng}); infowindow.open (karta); }); 3- Konačno gradimo svoje HTML i definiramo naš spremnik za kartu:
Dobivanje koordinata klikom miša
Kad je naš kod dovršen, pogledajmo kako naša karta izgleda u našem pregledniku kada kliknemo na nju i prikažu se podaci o zemljopisnoj širini i dužini te točke:
POVEĆAJTE
1- Uključujemo naš API i stvaramo naše stilove za našu kartu i za kontrolu koja će biti zadužena za prikaz informacija o zemljopisnoj širini i dužini:
2- Mi stvaramo svoju funkciju initializeMap () kao u prethodnim vježbama i definiramo parametre za svoju kontrolu gdje je inicijaliziramo s koordinatama 0.00 / 0.00:
var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Lat / Lng: 0,00 / 0,00'; 3- Zatim moramo stvoriti kontrolu i dodati je na našu kartu, to radimo s google.controls, gdje možemo odrediti položaj u kojem će se nalaziti, u ovom slučaju ćemo koristiti DESNO_DNO što odgovara u donjem desnom dijelu i spremniku u kojem će biti prikazan:
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);
4- Na kraju definiramo naš događaj koji će biti vrste pokret miša i ubacit će tekst u kontrolu informacija koje dobivamo:
google.maps.event.addListener (karta, 'pokret miša', funkcija (e) {var koordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + ' /' + e.latLng. lng (). toFixed (6); controlDiv.innerHTML = coordinateText;}); Pogledajmo kako izgleda naša karta s kontrolom za dobivanje podataka o zemljopisnoj širini i dužini:
POVEĆAJTE
1- Kreiramo datoteku pod nazivom menu_contextual.html a mi uključujemo Javascript API za Google karte, također stvaramo stilove za našu kartu i kontekstualni izbornik:
2- Prije stvaranja naše funkcije initializeMap () Moramo izvršiti nekoliko dodatnih koraka, jedan od njih je stvaranje funkcije za definiranje klase za kontekstni izbornik, da vidimo:
izbornik funkcijaKontekstualni (karta) {this.setMap (karta); this.map = karta; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 3- Nakon što to učinimo, moramo stvoriti opcije za naš kontekstualni izbornik i dodati događaj koji će pokrenuti svaki od njih kad se odabere, što će, kako ćemo zamisliti, biti klik:
menuContextual.prototype = novi google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'kontekstni izbornik'; this.menuDiv.innerHTML = 'Napravi oznaku
Zum
Poništi zumiranje
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'klik', funkcija (mouseEvent) {that.hide ();}); }; 4- Da završimo s kontekstualnim izbornikom, potrebno je samo dodati emisije i sakriti radnje, da vidimo kako naš dio koda izgleda za ovo:
menuContextual.prototype.show = funkcija (koordinata) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (koordinata); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'blok'; this.menuDiv.style.left = lijevo + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'vidljivo'; }; menuContextual.prototype.hide = function (x, y) {this.menuDiv.style.visibility = 'hidden'; } 5- Nakon što smo završili s kontekstualnim izbornikom, potrebno je samo programirati funkcije za opcije u našem izborniku, a to su zumiranje, poništavanje zumiranja i postavljanje markera:
funkcija doZoom () {map.setZoom (map.getZoom () + 1); } funkcija undoZoom () {map.setZoom (map.getZoom () - 1); } funkcija createMarker () {var marker = new google.maps.Marker ({position: lastCoordinate, map: map, title: 'Random Marker'}); } 6- Konačno, inicijaliziramo našu kartu, gdje je važno stvoriti kontekstualni jelovnik za našu kartu i definirajte glavni događaj desni klik koji će se aktivirati desnim klikom miša kada se pritisne:
contextMenu = novi menuContextual (karta); google.maps.event.addListener (karta, 'desni klik', funkcija (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 7- Mi stvaramo svoje HTML na konvencionalan način i pokrenimo naš primjer, da vidimo kako izgleda naš kontekstni izbornik kada desnom tipkom miša kliknemo na našu kartu:
POVEĆAJTE
POVEĆAJTE
