Управление на събития в Google Maps

The API на Google Карти Javascript Той е изключително мощен, тъй като не само позволява създаването на картите като такива, но и можем да направим крачка напред, като разширим функционалността му и използваме вектори за добавяне на интересни точки, падащи прозорци, линии и симулация на маршрути.
Друга силна страна на картите, които прилагаме и ако някога сме работили с Javascript, са събития, които са ядрото на езика и отговарят за управлението на взаимодействието на потребителя с уебсайта, в този конкретен случай взаимодействието с нашата карта.
Преди да започнем да практикуваме, първо трябва да знаем част от теорията зад събитията, обработвани от API, това използва пространството на имената google.maps.event да работи с тях. Той има статични методи за изслушване на събитията, дефинирани в API и контролера на addListener () да ги регистрирате.
Знаейки това, нека видим някои от най -важните събития, налични в API и които ще използваме в нашите примери:
center_changedТова събитие се задейства, когато се промени собствеността на центъра на картата.
щракнетеТова събитие се задейства, когато потребителят кликне върху картата, важно е да се спомене, че изключва кликванията върху маркери или информационни прозорци.
плъзнетеТова събитие се задейства многократно, когато потребителят влачи картата.
движение на мишкатаТова събитие се задейства, когато потребителят премести мишката си навсякъде в контейнера на картата.
Кликнете с десния бутонТова събитие се задейства, когато се задейства събитието от контекстното меню на DOM.
zoom_changedТова събитие се задейства при промяна на свойството на увеличение на картата.
Важно е да се спомене, че въпреки че тези събития може да изглеждат като стандартните събития от СЛЪНЦЕ те не са, те са част от API на Google Карти. Това за да се избегне проблемът, при който браузърите обработват различни видове събития за СЛЪНЦЕ.
След като вече видяхте най -използваните от API Нека отидем на практика, за да демонстрираме използването им при създаването на нашите карти, първият пример от този урок ще бъде фокусиран върху събития, свързани с промяната на свойствата на картата, което ще ни позволи да получим синхронизирана функционалност на картата, т.е. , имат карти с различни основи, които показват една и съща информация, независимо от промените в центъра или в мащаба.
Нека да видим стъпките, които трябва да следваме, за да постигнем тази цел:
1- Първо създаваме нов файл, който ще извикаме synchronized_maps.html и ние извършваме включването на API, заедно със стиловете, които контейнерът на нашите карти ще има, важно е да дефинираме глобалните променливи на картите, тъй като ще трябва да ги използваме в целия обхват на програмата:

 var map1, map2; 

2- Както споменахме преди, ще синхронизираме две карти с различни бази, за това трябва да създадем две функции, които да ги инициализират. Тези функции ще бъдат доста подобни на тези, които сме усвоили в предишни уроци, но те ще имат обработката на събития за постигане на функционалността за синхронизация, нека видим кода на първата функция:

 функция 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 = нов 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 ());}); } 

Както виждаме, ние имаме опциите на нашата карта както обикновено, за да дефинираме центъра, мащаба и основата, което в този случай е ПЪТНА КАРТА, след това задаваме опциите на нашата карта и накрая нашите събития, които са отговорни за получаване на стойностите на свойствата на карта номер 1 и поставянето им на карта номер 2, за това ще използваме събитията от center_changed Y zoom_changed това ни позволява да се синхронизираме.
3- След това трябва да създадем нашата функция за инициализиране на втората карта, кодът е подобен на предишния, но събитията ще се задействат от карта номер 2 до номер 1 и основата ще бъде ХИБРИД за да се покаже разликата между двете:

 функция 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 = нов 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- Накрая създаваме функция за създаване на екземпляри на картите, която ще ни позволи да направим екземпляра на двете, ние изграждаме нашата HTML и поставяме същия клас в divs, който ще съдържа нашите карти:

 функция initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (прозорец, „зареждане“, инициализиране на карти); Синхронизирани карти 

Нека да видим как изглеждат нашите синхронизирани карти, когато изпълняваме упражнението си в браузъра:

Увеличете

Важно е да споменем, че промените, които правим в едната карта, ще бъдат отразени в другата и обратно, нека да видим как изглежда тя, след като сменим свойствата на центъра и мащаба, тъй като те остават абсолютно същите, с изключение на основата :

Увеличете

Едно от най -популярните и универсални събития, които можем да открием, е използването на мишката като устройство за въвеждане на информация и взаимодействие с различни елементи на нашия интерфейс, в картите не е различно, можем да го използваме за задействане на различни събития според за да го използваме, в този пример ще използваме събитието click, за да получим координатите на тази конкретна точка, нека видим стъпките, които трябва да следваме:
1- Създаваме нов файл, наречен get_coordinates.html и ние включваме нашия API заедно със стиловете:

2- След това създаваме функцията initializeMap () както обикновено, но това ще има нещо различно и е дефиницията на събитието щракнете в addListener заедно с изпълнението на диалогов прозорец, който ще ни предостави информация за географската ширина и дължина на мястото, където кликваме, нека видим:

 google.maps.event.addListener (map, 'click', function (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Координати на мишката: 
Географска ширина: ' + e.latLng.lat () +'
Дължина: '+ e.latLng.lng (), позиция: e.latLng}); infowindow.open (карта); }); 

3- Най -накрая изграждаме нашата HTML и ние дефинираме нашия контейнер за картата:

 Получаване на координати с щракване на мишката

Когато кодът ни е завършен, нека видим как изглежда нашата карта в браузъра ни, когато кликнем върху нея и се покаже информацията за географската ширина и дължина на тази точка:

Увеличете

Вече видяхме, че можем да получим географската ширина и дължина на точка само с едно щракване на мишката, но това може да не е най -точното за получаване на тази информация, така че можем да приложим решение, което ни позволява да визуализираме географската ширина и дължина на всяка точка, през която преминаваме показалеца на нашата мишка, нека видим:
1- Включваме нашия API и създаваме нашите стилове за нашата карта и за контрола, който ще отговаря за показването на информацията за географската ширина и дължина:

2- Ние създаваме нашата функция initializeMap () както в предишните упражнения и дефинираме параметрите за нашия контрол, където го инициализираме с координатите 0.00 / 0.00:

 var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Lat / Lng: 0.00 / 0.00'; 

3- След това трябва да създадем контролата и да я добавим към нашата карта, правим това с google.controls, където можем да посочим позицията, в която ще бъде, в този случай ще използваме RIGHT_BOTTOM което съответства в долната дясна част и контейнера, където ще се показва:

map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);

4- Накрая определяме нашето събитие, което ще бъде от тип движение на мишката и ще инжектира текста за контрол на информацията, която получаваме:

 google.maps.event.addListener (map, 'mousemove', function (e) {varordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + ' /' + e.latLng. lng (). toFixed (6); controlDiv.innerHTML = coordinateText;}); 

Нека да видим как изглежда нашата карта с контролата, за да получим информация за географската ширина и дължина:

Увеличете

За да завършим, нека видим малко по -сложен пример, при който не само ще използваме събития, но и вектори и контекстуално меню, за да дадем на потребителя начин да комуникира с нашата карта по по -организиран и директен начин, нека видим стъпките, които трябва да следва постигаме целта си:
1- Ние създаваме файл, наречен menu_contextual.html и ние включваме API на Google Карти Javascript, ние също създаваме стиловете за нашата карта и контекстуално меню:

2- Преди да създадете нашата функция initializeMap () Трябва да извършим няколко допълнителни стъпки, една от тях е да създадем функцията за определяне на класа за контекстното меню, нека видим:

 function menuContextual (карта) {this.setMap (карта); this.map = карта; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 

3- След като това бъде направено, трябва да създадем опциите за нашето контекстуално меню и да добавим събитието, което ще задейства всяко от тях, когато бъде избрано, което, както си представяме, ще бъде щракнете:

 menuContextual.prototype = нов google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = 'Създаване на отметка
Мащабиране
Отмяна на мащабиране
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 

4- За да завършим с нашето контекстно меню, трябва само да добавим показването и скриването на действия, нека да видим как изглежда нашата част от кода за това:

 menuContextual.prototype.show = function (координира) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (координат); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'блок'; this.menuDiv.style.left = ляво + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'видимо'; }; menuContextual.prototype.hide = function (x, y) {this.menuDiv.style.visibility = 'скрит'; } 

5- След като приключихме с нашето контекстно меню, трябва само да програмираме функциите за опциите в нашето меню, които са за мащабиране, отмяна на мащабиране и поставяне на маркер:

 функция doZoom () {map.setZoom (map.getZoom () + 1); } функция undoZoom () {map.setZoom (map.getZoom () - 1); } функция createMarker () {var marker = new google.maps.Marker ({position: lastCoordinate, map: map, title: 'Random Marker'}); } 

6- Накрая инициализираме нашата карта, където важното тук е да създадем контекстно меню за нашата карта и дефинирайте основното събитие Кликнете с десния бутон което ще се задейства с десния бутон на мишката при натискане:

 contextMenu = ново менюContextual (карта); google.maps.event.addListener (map, 'rightclick', function (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 

7- Ние създаваме нашите HTML по конвенционалния начин и изпълнете нашия пример, нека видим как изглежда нашето контекстно меню, когато щракнем с десния бутон върху нашата карта:

Увеличете

Сега нека изпробваме опциите на нашето контекстно меню, като поставим някои маркери и играем с увеличението на нашата карта, нека видим:

Увеличете

С този последен пример приключваме този урок, след като се научихме да управляваме събитията от API на Google Карти Javascript да постигнем функционалности, които увеличават потребителския опит в картите, които създаваме, комбинирайки усъвършенствани техники за постигане на разширени и сложни функционалности, които ще направят нашата карта да се откроява на всеки внедрен уебсайт.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка