События Google Maps
- Предыдущая страница Слои Maps
- Следующая страница Контроллер Maps
Масштабировать при клике по маркеру
Мы по-прежнему используем карту с прошлого урока: карта с центром в Лондоне, Великобритания.
Теперь мы хотим масштабировать карту при клике по маркеру (мы добавляем обработчик событий к маркеру, чтобы масштабировать карту при клике).
Вот добавленный код:
Пример
// Масштабировать до 9 при клике по маркеру google.maps.event.addListener(marker,'click',function() { map.setZoom(9); map.setCenter(marker.getPosition()); });
Мы используем обработчик событий addListener() для регистрации уведомлений о событиях. Параметры,接受的 этим методом:
- Объект
- Событие, которое нужно отслеживать
- Функция, вызываемая при наступлении события
Перемещение карты к маркеру
Здесь мы сохраняем изменения масштаба и после 3 секунд перемещаем карту:
Пример
google.maps.event.addListener(marker,'click',function() { var pos = map.getZoom(); map.setZoom(9); map.setCenter(marker.getPosition()); window.setTimeout(function() {map.setZoom(pos);},3000); });
Информационное окно открывается при клике по маркеру
Информационное окно с текстом отображается при клике по маркеру:
Пример
var infowindow = new google.maps.InfoWindow({ content: "Привет мир!" }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });
Установка маркеров и открытие информационных окон для каждого маркера
Функция запускается при клике по карте.
placeMarker() функция устанавливает маркер в месте клика пользователя и отображает информационное окно с координатами этого маркера:
Пример
google.maps.event.addListener(map, 'click', function(event) { placeMarker(map, event.latLng); }); function placeMarker(map, location) { var marker = new google.maps.Marker({ position: location, map: map }); var infowindow = new google.maps.InfoWindow({ content: 'Широта: ' + location.lat() + 'Долгота: ' + location.lng() }); infowindow.open(map,marker); }
- Предыдущая страница Слои Maps
- Следующая страница Контроллер Maps