Spisie treści
ten Interfejs API JavaScript Map Google Jest niezwykle potężny, ponieważ nie tylko umożliwia tworzenie map jako takich, ale możemy pójść o krok dalej, rozszerzając jego funkcje i używając wektorów do dodawania interesujących miejsc, rozwijanych okien, linii i symulacji trasy.Kolejną mocną stroną map, które wdrażamy i jeśli kiedykolwiek pracowaliśmy z Javascriptem, są: wydarzenia, które są rdzeniem języka i odpowiadają za zarządzanie interakcją użytkownika ze stroną internetową, w tym konkretnym przypadku interakcją z naszą mapą.
Zanim przejdziemy do praktyki, musimy najpierw poznać trochę teorii stojącej za zdarzeniami obsługiwanymi przez API, to wykorzystuje przestrzeń nazw google.maps.event pracować z nimi. Posiada statyczne metody nasłuchiwania zdarzeń zdefiniowanych w API i kontrolerze addListener () aby je zarejestrować.
Wiedząc o tym, przyjrzyjmy się najważniejszym wydarzeniom dostępnym w API, które wykorzystamy w naszych przykładach:
centrum_zmienioneTo zdarzenie jest wywoływane, gdy zmienia się właściwość środka mapy.
KliknijTo zdarzenie jest wyzwalane, gdy użytkownik kliknie w mapę, należy wspomnieć, że wyklucza kliknięcia w znaczniki lub okna informacyjne.
ciągnąćTo zdarzenie jest wywoływane wielokrotnie, gdy użytkownik przeciąga mapę.
ruch mysząTo zdarzenie jest wywoływane, gdy użytkownik przesunie mysz w dowolne miejsce kontenera mapy.
kliknij prawym przyciskiem myszyTo zdarzenie jest wywoływane po wyzwoleniu zdarzenia menu kontekstowego DOM.
zoom_zmienionyTo zdarzenie jest wywoływane, gdy zmieni się właściwość zoom mapy.
Należy wspomnieć, że chociaż te wydarzenia mogą wyglądać jak standardowe wydarzenia SŁOŃCE nie są, są częścią Interfejs API Map Google. Ma to na celu uniknięcie problemu polegającego na tym, że przeglądarki obsługują różne typy zdarzeń dla SŁOŃCE.
Po zapoznaniu się z wydarzeniami najczęściej używanymi przez API Przejdźmy do praktyki, aby zademonstrować wykorzystanie ich przy tworzeniu naszych map, pierwszy przykład tego samouczka skupi się na zdarzeniach związanych ze zmianą właściwości mapy, co pozwoli nam uzyskać zsynchronizowaną funkcjonalność mapy, czyli , mają mapy z różnymi podstawami, które pokazują te same informacje niezależnie od zmian w ich środku lub powiększeniu.
Zobaczmy kroki, które musimy wykonać, aby osiągnąć ten cel:
1- Najpierw tworzymy nowy plik, który nazwiemy synced_maps.html i przeprowadzamy włączenie API, wraz ze stylami, które będą miały kontener naszych map, ważne jest zdefiniowanie zmiennych globalnych map, ponieważ będziemy musieli ich używać w całym zakresie programu:
var mapa1, mapa2;
2- Jak wspomnieliśmy wcześniej, zamierzamy zsynchronizować dwie mapy z różnymi bazami, w tym celu musimy stworzyć dwie funkcje, które je inicjują. Te funkcje będą dość podobne do tych, które opanowaliśmy w poprzednich samouczkach, jednak będą miały obsługę zdarzeń, aby osiągnąć funkcjonalność synchronizacji, zobaczmy kod pierwszej funkcji:
function 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 = nowa 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 ());}); } Jak widać, jak zwykle mamy opcje naszej mapy do określenia środka, zoomu i podstawy, która w tym przypadku jest MAPA DROGOWA, następnie ustawiamy opcje do naszej mapy i na końcu nasze zdarzenia, które odpowiadają za uzyskanie wartości właściwości mapy nr 1 i ustawienie ich na mapie nr 2, do tego wykorzystamy zdarzenia z centrum_zmienione Tak zoom_zmieniony to pozwala nam się zsynchronizować.
3- Następnie musimy utworzyć naszą funkcję inicjalizacji drugiej mapy, kod jest podobny do poprzedniego, jednak zdarzenia będą odpalane z mapy nr 2 na nr 1 i baza będzie HYBRYDOWY aby pokazać różnicę między obydwoma:
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 = nowa google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (map2, 'center_changed', function () {setTimeout (funkcja () {map1.setCenter (map2.getCenter ());}, 10);}); google.maps.event.addListener (mapa2, 'zoom_changed', function () {setTimeout (funkcja () {map1.setZoom (map2.getZoom ());}, 10);}); } 4- Na koniec tworzymy funkcję do tworzenia instancji map, która pozwoli nam stworzyć instancję obu, budujemy nasze HTML i umieściliśmy tę samą klasę w divach, które będą zawierały nasze mapy:
funkcja initializeMaps () {initializeMap1 (); zainicjowaćMap2 (); } google.maps.event.addDomListener (okno, 'load', initializeMaps); Zsynchronizowane mapy
Zobaczmy, jak wyglądają nasze zsynchronizowane mapy, gdy uruchamiamy nasze ćwiczenie w przeglądarce:
POWIĘKSZAĆ
POWIĘKSZAĆ
1- Tworzymy nowy plik o nazwie pobierz_współrzędne.html i dołączamy nasze API wraz ze stylami:
2- Następnie tworzymy funkcję zainicjowaćMapę () jak zwykle, ale to będzie miało coś innego i jest definicją wydarzenia Kliknij w addListener wraz z zaimplementowaniem okna dialogowego, które dostarczy nam informacji o szerokości i długości geograficznej miejsca kliknięcia, zobaczmy:
google.maps.event.addListener (mapa, 'klik', funkcja (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Współrzędne myszy:
Szerokość: '+ e.latLng.lat () +'
Długość: '+ j.latLng.lng (), pozycja: j.latLng}); infowindow.open (mapa); }); 3- Wreszcie budujemy nasze HTML i definiujemy nasz kontener na mapę:
Uzyskiwanie współrzędnych za pomocą kliknięcia myszką
Po skończeniu naszego kodu zobaczmy, jak nasza mapa wygląda w naszej przeglądarce po kliknięciu na nią i wyświetlą się informacje o szerokości i długości geograficznej tego punktu:
POWIĘKSZAĆ
1- Dołączamy nasze API i tworzymy nasze style dla naszej mapy oraz dla kontroli, która będzie odpowiedzialna za wyświetlanie informacji o szerokości i długości geograficznej:
2- Tworzymy naszą funkcję zainicjowaćMapę () tak jak w poprzednich ćwiczeniach i definiujemy parametry dla naszej kontroli, gdzie inicjujemy ją ze współrzędnymi 0.00 / 0.00:
var controlDiv = document.createElement ('div'); ControlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Szerokość / Długość: 0,00 / 0,00'; 3- Następnie musimy stworzyć kontrolkę i dodać ją do naszej mapy, robimy to za pomocą google.controls, gdzie możemy określić pozycję w jakiej będzie się znajdować, w tym przypadku użyjemy PRAWY DÓŁ co odpowiada w prawej dolnej części i kontenerze, w którym będzie wyświetlany:
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);
4- Na koniec określamy nasze wydarzenie, które będzie tego typu ruch myszą i wprowadzi tekst do kontroli informacji, które otrzymujemy:
google.maps.event.addListener (mapa, 'mousemove', function (e) {var coordinateText = 'Lat/Lng:' + e.latLng.lat()). toFixed (6) + '/' + e.latLng. lng().toFixed (6);controlDiv.innerHTML = coordinateText;}); Zobaczmy, jak wygląda nasza mapa z kontrolką, aby uzyskać informacje o szerokości i długości geograficznej:
POWIĘKSZAĆ
1- Tworzymy plik o nazwie menu_contextual.html i uwzględniamy Interfejs API JavaScript Map Google, tworzymy również style dla naszej mapy i menu kontekstowego:
2- Przed utworzeniem naszej funkcji zainicjowaćMapę () Musimy wykonać kilka dodatkowych kroków, jednym z nich jest stworzenie funkcji definiującej klasę dla menu kontekstowego, zobaczmy:
function menuContextual (mapa) {this.setMap (mapa); this.map = mapa; this.mapDiv = mapa.getDiv (); this.menuDiv = null; }; 3- Po wykonaniu tej czynności musimy utworzyć opcje dla naszego menu kontekstowego i dodać zdarzenie, które uruchomi każde z nich po wybraniu, co, jak sobie wyobrażamy, będzie Kliknij:
menuContextual.prototype = new google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function() {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'menu kontekstowe'; this.menuDiv.innerHTML = 'Utwórz zakładkę
Powiększenie
Cofnij powiększenie
'; this.getPanes().floatPane.appendChild (this.menuDiv); google.maps.event.addListener (ta.mapa, 'klik', funkcja (mouseEvent) {that.hide ();}); }; 4- Aby zakończyć z naszym menu kontekstowym, musimy tylko dodać akcje pokaż i ukryj, zobaczmy, jak wygląda nasza część kodu w tym przypadku:
menuContextual.prototype.show = function (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (współrzędna); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'blok'; this.menuDiv.style.left = lewo + 'px'; this.menuDiv.style.top = góra + 'px'; this.menuDiv.style.visibility = 'widoczny'; }; menuContextual.prototype.hide = function (x, y) {this.menuDiv.style.visibility = 'ukryty'; } 5- Po skończeniu z naszym menu kontekstowym pozostaje nam tylko zaprogramować funkcje dla opcji w naszym menu, czyli powiększanie, cofanie powiększania i umieszczanie znacznika:
funkcja doZoom () {map.setZoom (map.getZoom () + 1); } funkcja undoZoom () {map.setZoom (map.getZoom () - 1); } function createMarker () {var marker = new google.maps.Marker ({position: lastCoordinate, map: map, title: 'Random Marker'}); } 6- Na koniec inicjujemy naszą mapę, gdzie ważne jest, aby stworzyć menu kontekstowe dla naszej mapy i określ główne wydarzenie kliknij prawym przyciskiem myszy który zostanie wywołany prawym przyciskiem myszy po naciśnięciu:
contextMenu = nowe menuContextual (mapa); google.maps.event.addListener (mapa, 'kliknij prawym przyciskiem', funkcja (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 7- Tworzymy nasze HTML w konwencjonalny sposób i uruchom nasz przykład, zobaczmy, jak wygląda nasze menu kontekstowe, gdy klikniemy prawym przyciskiem myszy na naszej mapie:
POWIĘKSZAĆ
POWIĘKSZAĆ
