Мероприятия

Выберите платформу: Android iOS JavaScript

На этой странице описаны события пользовательского интерфейса и события ошибок, которые вы можете отслеживать и обрабатывать программно.

События пользовательского интерфейса

JavaScript в браузере работает на основе событий , то есть JavaScript реагирует на взаимодействия, генерируя события, и ожидает, что программа будет отслеживать интересующие её события. Существует два типа событий:

  • Пользовательские события (например, события щелчка мыши) передаются из DOM в JavaScript API карт. Эти события являются отдельными и отличными от стандартных событий DOM.
  • Уведомления об изменении состояния MVC отражают изменения в объектах JavaScript API Maps и именуются с использованием соглашения о присвоении имени property _changed .

Каждый объект JavaScript API Maps экспортирует ряд именованных событий. Программы, заинтересованные в определенных событиях, регистрируют обработчики событий JavaScript для этих событий и выполняют код при их получении, вызывая addListener() для регистрации обработчиков событий в объекте.

В следующем примере показано, какие события запускаются при взаимодействии с картой google.maps.Map .

Полный список событий см. в справочнике по JavaScript API Maps . События перечислены в отдельном разделе для каждого объекта, содержащего события.

События пользовательского интерфейса

Некоторые объекты в JavaScript API Maps предназначены для реагирования на события пользователя, такие как события мыши или клавиатуры. Например, вот некоторые из событий пользователя, которые может отслеживать объект google.maps.marker.AdvancedMarkerElement :

  • 'click'
  • 'drag'
  • 'dragend'
  • 'dragstart'
  • 'gmp-click'

Полный список см. в классе AdvancedMarkerElement . Эти события могут выглядеть как стандартные события DOM, но на самом деле они являются частью JavaScript API карт. Поскольку разные браузеры реализуют разные модели событий DOM, JavaScript API карт предоставляет эти механизмы для прослушивания и реагирования на события DOM без необходимости обработки различных кроссбраузерных особенностей. Эти события также обычно передают аргументы внутри события, отмечая некоторое состояние пользовательского интерфейса (например, положение мыши).

Изменения состояния MVC

Объекты MVC обычно содержат состояние. Всякий раз, когда свойство объекта изменяется, JavaScript API Maps генерирует событие, указывающее на изменение свойства. Например, API сгенерирует событие zoom_changed на карте при изменении уровня масштабирования карты. Вы можете перехватывать эти изменения состояния, вызывая addListener() для регистрации обработчиков событий на объекте.

Пользовательские события и изменения состояния MVC могут выглядеть похожими, но в коде к ним следует относиться по-разному. Например, события MVC не передают аргументы внутри самого события. Проверьте свойство, которое изменилось при изменении состояния MVC, вызвав соответствующий метод get Property для этого объекта.

Обработка событий

Для регистрации на получение уведомлений о событиях используйте обработчик событий addListener() . Этот метод принимает событие, которое нужно отслеживать, и функцию, которая будет вызвана при наступлении указанного события.

Пример: События на карте и с использованием маркеров

Приведенный ниже код сочетает пользовательские события с событиями изменения состояния. В этом примере обработчик событий прикрепляется к маркеру, который увеличивает масштаб карты при щелчке. Также к карте прикрепляется обработчик событий для изменений свойства center и возвращает карту к маркеру через 3 секунды после получения события center_changed .

Машинопись 

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;

    // Retrieve the map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    // Get the inner map from the map element.
    const innerMap = mapElement.innerMap;

    const center = mapElement.center;

    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: 'Click to zoom',
        gmpClickable: true,
    });

    innerMap.addListener('center_changed', () => {
        // 3 seconds after the center of the map has changed,
        // pan back to the marker.
        window.setTimeout(() => {
            innerMap.panTo(marker.position as google.maps.LatLng);
        }, 3000);
    });

    // Zoom in when the marker is clicked.
    marker.addListener('gmp-click', () => {
        innerMap.setZoom(8);
        innerMap.setCenter(marker.position as google.maps.LatLng);
    });
}

initMap();
index.ts

JavaScript 

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Retrieve the map element.
    const mapElement = document.querySelector('gmp-map');
    // Get the inner map from the map element.
    const innerMap = mapElement.innerMap;
    const center = mapElement.center;
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: 'Click to zoom',
        gmpClickable: true,
    });
    innerMap.addListener('center_changed', () => {
        // 3 seconds after the center of the map has changed,
        // pan back to the marker.
        window.setTimeout(() => {
            innerMap.panTo(marker.position);
        }, 3000);
    });
    // Zoom in when the marker is clicked.
    marker.addListener('gmp-click', () => {
        innerMap.setZoom(8);
        innerMap.setCenter(marker.position);
    });
}
initMap();
index.js
Посмотреть пример

Попробуйте образец

Совет : Если вы пытаетесь обнаружить изменение области видимости, обязательно используйте конкретное событие bounds_changed , а не отдельные события zoom_changed и center_changed . Поскольку API JavaScript для карт запускает эти последние события независимо, getBounds() может не сообщать полезных результатов до тех пор, пока область видимости не изменится окончательно. Если вы хотите использовать getBounds() после такого события, обязательно прослушивайте событие bounds_changed .

Пример: Редактирование фигур и события перетаскивания

При редактировании или перетаскивании фигуры по завершении действия срабатывает событие. Список событий и некоторые фрагменты кода см. в разделе «Фигуры» .

Посмотреть пример (rectangle-event.html)

Доступ к аргументам в событиях пользовательского интерфейса

В JavaScript API карт события пользовательского интерфейса обычно передают аргумент события, к которому может получить доступ обработчик событий, фиксируя состояние пользовательского интерфейса в момент возникновения события. Например, событие 'click' в пользовательском интерфейсе обычно передает MouseEvent , содержащее свойство latLng обозначающее место щелчка на карте. Следует отметить, что это поведение уникально для событий пользовательского интерфейса; изменения состояния в MVC не передают аргументы в своих событиях.

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

Машинопись 

async function initMap() {
  // Request needed libraries.
  await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  innerMap.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, innerMap);
  });
}

function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.ts

JavaScript 

async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    innerMap.addListener("click", (e) => {
        placeMarkerAndPanTo(e.latLng, innerMap);
    });
}
function placeMarkerAndPanTo(latLng, map) {
    new google.maps.marker.AdvancedMarkerElement({
        position: latLng,
        map: map,
    });
    map.panTo(latLng);
}
initMap();
index.js
Посмотреть пример

Попробуйте образец

Используйте замыкания в обработчиках событий.

При выполнении обработчика событий часто бывает полезно иметь как приватные, так и постоянные данные, прикрепленные к объекту. JavaScript не поддерживает «приватные» данные экземпляра, но поддерживает замыкания , которые позволяют внутренним функциям получать доступ к внешним переменным. Замыкания полезны внутри обработчиков событий для доступа к переменным, которые обычно не прикреплены к объектам, на которых происходят события.

В следующем примере используется замыкание функции в обработчике событий для присвоения секретного сообщения набору маркеров. При нажатии на каждый маркер откроется часть секретного сообщения, которая не содержится в самом маркере.

Машинопись 

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;
    const innerMap = mapElement.innerMap;

    const bounds: google.maps.LatLngBoundsLiteral = {
        north: -25.363882,
        south: -31.203405,
        east: 131.044922,
        west: 125.244141,
    };

    // Display the area between the location southWest and northEast.
    innerMap.fitBounds(bounds);

    // Add 5 markers to map at random locations.
    // For each of these markers, give them a title with their index, and when
    // they are clicked they should open an infowindow with text from a secret
    // message.
    const secretMessages = ['This', 'is', 'the', 'secret', 'message'];
    const lngSpan = bounds.east - bounds.west;
    const latSpan = bounds.north - bounds.south;

    for (let i = 0; i < secretMessages.length; ++i) {
        const marker = new google.maps.marker.AdvancedMarkerElement({
            position: {
                lat: bounds.south + latSpan * Math.random(),
                lng: bounds.west + lngSpan * Math.random(),
            },
            map: innerMap,
        });

        attachSecretMessage(marker, secretMessages[i]);
    }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(
    marker: google.maps.marker.AdvancedMarkerElement,
    secretMessage: string
) {
    const infowindow = new google.maps.InfoWindow({
        content: secretMessage,
    });

    marker.addListener('gmp-click', () => {
        infowindow.open(marker.map, marker);
    });
}

initMap();
index.ts

JavaScript 

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    const bounds = {
        north: -25.363882,
        south: -31.203405,
        east: 131.044922,
        west: 125.244141,
    };
    // Display the area between the location southWest and northEast.
    innerMap.fitBounds(bounds);
    // Add 5 markers to map at random locations.
    // For each of these markers, give them a title with their index, and when
    // they are clicked they should open an infowindow with text from a secret
    // message.
    const secretMessages = ['This', 'is', 'the', 'secret', 'message'];
    const lngSpan = bounds.east - bounds.west;
    const latSpan = bounds.north - bounds.south;
    for (let i = 0; i < secretMessages.length; ++i) {
        const marker = new google.maps.marker.AdvancedMarkerElement({
            position: {
                lat: bounds.south + latSpan * Math.random(),
                lng: bounds.west + lngSpan * Math.random(),
            },
            map: innerMap,
        });
        attachSecretMessage(marker, secretMessages[i]);
    }
}
// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
    const infowindow = new google.maps.InfoWindow({
        content: secretMessage,
    });
    marker.addListener('gmp-click', () => {
        infowindow.open(marker.map, marker);
    });
}
initMap();
index.js
Посмотреть пример

Попробуйте образец

Получение и установка свойств внутри обработчиков событий

В системе событий Maps JavaScript API ни одно из событий изменения состояния MVC не передает аргументы при срабатывании события. (События, связанные с пользователем, передают аргументы, которые можно проверить.) Если вам необходимо проверить свойство при изменении состояния MVC, следует явно вызвать соответствующий метод get Property () для этого объекта. Эта проверка всегда будет получать текущее состояние объекта MVC, которое может отличаться от состояния на момент первого срабатывания события.

Примечание : Явная установка свойства внутри обработчика событий, реагирующего на изменение состояния этого конкретного свойства, может привести к непредсказуемому и/или нежелательному поведению. Например, установка такого свойства вызовет новое событие, и если вы всегда устанавливаете свойство внутри этого обработчика событий, вы можете создать бесконечный цикл.

В приведенном ниже примере показано, как настроить обработчик событий для реагирования на события масштабирования путем отображения информационного окна с указанием соответствующего уровня.

Машинопись 

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: originalMapCenter,
    }
  );

  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);

  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom()!);
  });
}

initMap();
index.ts

JavaScript 

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: originalMapCenter,
  });
  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);
  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom());
  });
}

initMap();
index.js
Посмотреть пример

Попробуйте образец

Удалить обработчики событий

Чтобы удалить конкретный обработчик событий, он должен быть присвоен переменной. Затем можно вызвать метод removeListener() , передав имя переменной, которой был присвоен обработчик.

var listener1 = marker.addListener('click', aFunction);

google.maps.event.removeListener(listener1);

Чтобы удалить все обработчики событий от конкретного экземпляра, вызовите метод clearInstanceListeners() , передав в качестве параметра имя экземпляра. 

var listener1 = marker.addListener('click', aFunction);
var listener2 = marker.addListener('mouseover', bFunction);

// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);

Чтобы удалить все обработчики событий определенного типа для конкретного экземпляра, вызовите метод clearListeners() , передав имя экземпляра и имя события. 

marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);

// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');

Для получения более подробной информации обратитесь к справочной документации по пространству имен google.maps.event .

Отслеживайте ошибки аутентификации.

Если вы хотите программно обнаружить сбой аутентификации (например, для автоматической отправки маяка), вы можете подготовить функцию обратного вызова. Если определена следующая глобальная функция, она будет вызвана при сбое аутентификации. function gm_authFailure() { /* Code */ };

В TypeScript может потребоваться добавить функцию в глобальную область видимости, как показано ниже: 

// Define the callback function.
window.gm_authFailure = () => {
  console.error("Google Maps failed to authenticate.");
  /* Code */
};

// Add gm_authFailure to the global scope.
declare global {
  interface Window {
    gm_authFailure?: () => void;
  }
}
export {};