Google Карты событий
Нажмите на знак, чтобы увеличить карту
Мы все еще используем карту Лондона, Англия, которую мы использовали в предыдущей статье.
Когда пользователь нажимает на марку, функция масштабирования карты реализована (событие Zoom карты связано при щелчке отметки).
Код заключается в следующем:
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850); function initiazize () {var mapprop = {center: myCenter, Zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map.maps.getelemead.ReadMap}; var Map = new Google.maps.Map (document.getElemead ("googlemap"; google.maps.marker ({позиция: mycenter, заголовок: «Нажмите на Zoom '}); marker.setMap (map); // Zoom до 9 при щелчке на Markergoogle.maps.event.addlistener (Marker,' Click ', function () {map.setzoom (9); map.setenter (marker.getposion ();); });} google.maps.event.adddomlistener (window, 'load', initiaze); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Используйте обработчик событий AddListener, чтобы зарегистрировать прослушивание события. Этот метод использует объект и событие для прослушивания, и функция будет вызвана, когда произойдет указанное событие.
Сбросить отметку
Мы меняем атрибут «центра», добавив обработчик событий на карту. Следующий код использует событие CENTER_CHANGED, чтобы отметить центральную точку через 3 секунды:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850); function initiazize () {var mapprop = {center: myCenter, Zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map.maps.getelemead.ReadMap}; var Map = new Google.maps.Map (document.getElemead ("googlemap"; google.maps.marker ({позиция: mycenter, заголовок: «Нажмите на Zoom '}); marker.setmap (map); // Zoom до 9 при нажатии на Markergoogle.maps.event.addlistener (Marker,' Click ', function () {map.setzoom (9); map.setcenter (marker.getposion ();); google.maps.event.addlistener (map, 'center_changed', function () {// 3 секунды после того, как центр карты изменился, паннируйте обратно в windows Marker.settimeout (function () {map.panto (marker.getPosition ();}, 3000);});} Google.Maps.Event.AddD.Lister (windos ',',};};} Google.Maps.Event.AddD.DdleNLENLER (windope. инициализировать); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Окно сообщения открывается, когда вы нажимаете на знак.
Нажмите на тег, чтобы отобразить некоторую текстовую информацию в информационном окне:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850); function initiazize () {var mapprop = {center: myCenter, Zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map.maps.getelemead.ReadMap}; var Map = new Google.maps.Map (document.getElemead ("googlemap"; google.maps.marker ({позиция: mycenter,}); marker.setmap (map); var Infowindow = new Google.maps.infowindow ({Content: «Hello World!»}); Google.maps.event.addlistener (Marker, 'click', function () {InfowNdow.open (map, marker); });} google.maps.event.adddomlistener (window, 'load', initiaze); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Установка отметок и открытие информационного окна для каждой отметки
Выполните окно, когда пользователь нажимает на карту
Когда пользователь нажимает местоположение на карте, используйте функцию PlaceMarker (), чтобы поместить отметку в указанном положении, и появляется окно сообщения:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? Google.maps.latlng (51.508742, -0.120850); function initiazize () {var mapprop = {center: myCenter, Zoom: 5, maptypeid: google.maps.maptypeid.roidmap}; map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp); google.maps.event.addlistener (map, 'click', function (event) {placemarker (event.latlng);});} function placeMarker (location) {var marker = new Google.maps.marker ({положение: местоположение, карта: карта,}); var InfoWindow = new Google.maps.infowindow ({content: 'latitude:' + location.lat () + '<br> долгота:' + location.lng ()}); Infowindow.open (map, marker);} google.maps.event.adddomlistener (window, 'load', initiaze); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Выше приведено сборник основных знаний о событиях Google Maps. Мы будем продолжать добавлять соответствующие знания в будущем. Спасибо за поддержку этого сайта!