Cuprins
API Google Maps Javascript Este extrem de puternic, deoarece nu numai că permite crearea hărților ca atare, dar putem face un pas mai departe extinzându-i funcționalitățile și folosind vectori pentru a adăuga puncte de interes, ferestre derulante, linii și simulare a traseului.Un alt punct forte al hărților pe care le implementăm și dacă am lucrat vreodată cu Javascript sunt evenimente, care sunt nucleul limbajului și sunt responsabile de gestionarea interacțiunii utilizatorului cu site-ul web, în acest caz specific interacțiunea cu harta noastră.
Înainte de a merge la practică, trebuie să cunoaștem mai întâi o parte din teoria din spatele evenimentelor gestionate de API, aceasta utilizează spațiul de nume google.maps.event să lucrez cu ei. Are metode statice pentru a asculta evenimentele definite în API și în controlerul addListener () pentru a le înregistra.
Știind acest lucru, să vedem câteva dintre cele mai importante evenimente disponibile în API și pe care le vom folosi în exemplele noastre:
centru_modificatAcest eveniment este declanșat când proprietatea centrului hărții se schimbă.
clicAcest eveniment este declanșat atunci când utilizatorul face clic pe hartă, este important de menționat că exclude clicurile pe markere sau ferestre de informații.
trageAcest eveniment este declanșat în mod repetat atunci când utilizatorul trage harta.
mousemoveAcest eveniment este declanșat atunci când utilizatorul mută mouse-ul oriunde în containerul hărții.
Click dreaptaAcest eveniment este declanșat când este declanșat evenimentul din meniul contextual DOM.
zoom_changedAcest eveniment este declanșat când se modifică proprietatea zoom a hărții.
Este important de menționat că, deși aceste evenimente pot arăta ca evenimentele standard ale SOARE nu sunt, fac parte din API Google Maps. Aceasta pentru a evita problema în care browserele gestionează diferite tipuri de evenimente pentru SOARE.
După ce am văzut deja evenimentele cele mai folosite de API Să mergem la practică pentru a demonstra utilizarea acestora în crearea hărților noastre, primul exemplu al acestui tutorial va fi axat pe evenimente legate de schimbarea proprietăților hărții, ceea ce ne va permite să obținem o funcționalitate sincronizată a hărții, adică , au hărți cu baze diferite care arată aceleași informații, indiferent de modificările din centrul lor sau de zoom.
Să vedem pașii pe care trebuie să-i urmăm pentru a atinge acest obiectiv:
1- Mai întâi creăm un fișier nou pe care îl vom apela synchronized_maps.html și realizăm includerea API-ului, împreună cu stilurile pe care le va avea containerul hărților noastre, este important să definim variabilele globale ale hărților, deoarece va trebui să le folosim pe tot cuprinsul programului:
var hartă1, hartă2;
2- După cum am menționat anterior, vom sincroniza două hărți cu baze diferite, pentru aceasta trebuie să creăm două funcții care le inițializează. Aceste funcții vor fi destul de asemănătoare cu cele pe care le-am stăpânit în tutoriale anterioare, cu toate acestea vor avea gestionarea evenimentelor pentru a realiza funcționalitatea de sincronizare, să vedem codul primei funcții:
funcția initializeMap1 () {var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map1 = new 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 ());}); } După cum putem vedea, avem opțiunile hărții noastre ca de obicei pentru a defini centrul, zoomul și baza, care în acest caz este HARTA RUTIERĂ, apoi setăm opțiunile pentru harta noastră și în cele din urmă evenimentele noastre care sunt responsabile pentru obținerea valorilor proprietăților hărții numărul 1 și setarea lor pe harta numărul 2, pentru aceasta vom folosi evenimentele din centru_modificat Da zoom_changed asta ne permite să sincronizăm.
3- Apoi, trebuie să ne creăm funcția pentru a inițializa a doua hartă, codul este similar cu cel anterior, totuși evenimentele se vor declanșa de la harta numărul 2 la numărul 1, iar baza va fi HIBRID pentru a arăta diferența dintre ambele:
function initializeMap2 () {var mapOptions2 = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); map2 = new 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- În cele din urmă, creăm o funcție pentru instanțierea hărților, care ne va permite să creăm instanța ambelor, ne construim HTML și punem aceeași clasă divs-urilor care vor conține hărțile noastre:
funcția initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (fereastră, 'load', initializeMaps); Hărți sincronizate
Să vedem cum arată hărțile noastre sincronizate atunci când ne executăm exercițiul în browser:
MARI
MARI
1- Creăm un nou fișier numit get_coordinates.html și includem API-ul nostru împreună cu stilurile:
2- Apoi creăm funcția initializeMap () ca de obicei, dar acest lucru va avea ceva diferit și este definiția evenimentului clic în addListener împreună cu implementarea unui dialog care ne va oferi informații despre latitudinea și longitudinea locului în care facem clic, să vedem:
google.maps.event.addListener (hartă, „clic”, funcție (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Coordonatele mouse-ului:
Latitudine: '+ e.latLng.lat () +'
Lungime: '+ e.latLng.lng (), poziție: e.latLng}); infowindow.open (hartă); }); 3- În cele din urmă ne construim HTML și ne definim containerul pentru hartă:
Obținerea coordonatelor cu clicul mouse-ului
Odată terminat codul, să vedem cum arată harta noastră în browserul nostru când facem clic pe el și sunt afișate informațiile de latitudine și longitudine ale acelui punct:
MARI
1- Includem API-ul nostru și creăm stilurile noastre pentru harta noastră și pentru controlul care va fi responsabil de afișarea informațiilor despre latitudine și longitudine:
2- Ne creăm funcția initializeMap () ca și în exercițiile anterioare și definim parametrii pentru controlul nostru unde îl inițializăm cu coordonatele 0.00 / 0.00:
var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Lat / Lng: 0,00 / 0,00'; 3- Apoi, trebuie să creăm controlul și să-l adăugăm pe harta noastră, facem acest lucru cu google.controls, unde putem specifica poziția în care va fi, în acest caz vom folosi DREAPTA JOS care corespunde în partea din dreapta jos și containerul unde va fi afișat:
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);
4- În cele din urmă ne definim evenimentul care va fi de tip mousemove și va injecta textul pentru controlul informațiilor pe care le obținem:
google.maps.event.addListener (map, 'mousemove', function (e) {var coordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + '/' + e.latLng. lng (). toFixed (6); controlDiv.innerHTML = coordinateText;}); Să vedem cum arată harta noastră cu controlul pentru a obține informații despre latitudine și longitudine:
MARI
1- Creăm un fișier numit menu_contextual.html și includem API Google Maps Javascript, creăm, de asemenea, stilurile pentru harta și meniul contextual:
2- Înainte de a ne crea funcția initializeMap () Trebuie să efectuăm câțiva pași suplimentari, unul dintre ei este să creăm funcția pentru a defini clasa pentru meniul contextual, să vedem:
meniu funcțional Contextual (hartă) {this.setMap (hartă); this.map = hartă; this.mapDiv = map.getDiv (); this.menuDiv = nul; }; 3- Odată ce acest lucru este făcut, trebuie să creăm opțiunile pentru meniul nostru contextual și să adăugăm evenimentul care va declanșa fiecare dintre acestea atunci când este selectat, care așa cum ne vom imagina va fi clic:
menuContextual.prototype = new google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = aceasta; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = 'Creați un marcaj
Zoom
Anulați zoomul
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 4- Pentru a finaliza cu meniul nostru contextual, trebuie doar să adăugăm acțiunile de spectacol și ascundere, să vedem cum arată porțiunea noastră de cod pentru aceasta:
menuContextual.prototype.show = function (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (coord); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'blocare'; this.menuDiv.style.left = left + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'vizibil'; }; menuContextual.prototype.hide = funcție (x, y) {this.menuDiv.style.visibility = 'ascuns'; } 5- După ce am terminat cu meniul nostru contextual, trebuie doar să programăm funcțiile pentru opțiunile din meniul nostru, care sunt de a mări, anula zoom și a plasa un marker:
funcția doZoom () {map.setZoom (map.getZoom () + 1); } function undoZoom () {map.setZoom (map.getZoom () - 1); } funcție createMarker () {var marker = new google.maps.Marker ({poziție: ultimulCoordonat, hartă: hartă, titlu: 'Marcator aleator'}); } 6- În cele din urmă ne inițializăm harta, unde important este să creăm meniu contextual pentru harta noastră și definiți evenimentul principal Click dreapta care va fi declanșat de clicul dreapta al mouse-ului la apăsare:
contextMenu = new menuContextual (hartă); google.maps.event.addListener (hartă, 'clic dreapta', funcție (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 7- Noi ne creăm HTML în mod convențional și rulați exemplul nostru, să vedem cum arată meniul nostru contextual atunci când facem clic dreapta pe harta noastră:
MARI
MARI
