Google Мапи. Події
Натисніть "Маркер для масштабування"
Ми все ще використовуємо мапу з попередньої сторінки: мапу з центром Лондона, Англія.
Тепер ми хочемо збільшити масштаб, коли користувач клікає маркер (ми прикріплюємо обробник подій до маркера, який масштабує мапу під час клікання).
Ось доданий код:
Приклад
// Збільшити масштаб до 9, натиснувши на маркер
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Ми реєструємося для сповіщень про події за допомогою обробника подій addListener(). Цей метод приймає об’єкт, подію для прослуховування та функцію для виклику, коли відбувається зазначена подія.
Pan Back до маркера
Тут ми зберігаємо зміни масштабів і скасуємо карту назад через 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);
});
Відкрити InfoWindow натиснувши на маркер
Клікніть на маркер, щоб показати InfoWindow з деяким текстом:
Приклад
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Встановити маркери та відкрити InfoWindow для кожного маркера
Запустіть функцію, коли користувач клікає на мапі.
Функція placeMarker() розміщує маркер, де користувач натиснув, і показує InfoWindow з широтою та довготою маркера:
Приклад
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: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
