Мероприятия

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

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

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

JavaScript в браузере управляется событиями . Это означает, что JavaScript реагирует на взаимодействия, генерируя события, и ожидает, что программа прослушивает интересные события. Есть два типа событий:

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример: события карты и маркера

Следующий код смешивает пользовательские события с событиями изменения состояния. Мы прикрепляем обработчик событий к маркеру, который масштабирует карту при нажатии. Мы также добавляем на карту обработчик событий для изменения свойства center и панорамируем карту обратно к маркеру через 3 секунды после получения события center_changed :

Машинопись 

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

  const myLatlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatlng,
      mapId: "DEMO_MAP_ID",
    }
  );

  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

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

  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position as google.maps.LatLng);
  });
}

initMap();
index.ts

JavaScript 

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
    mapId: "DEMO_MAP_ID",
  });
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position);
    }, 3000);
  });
  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position);
  });
}

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

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

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

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

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

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

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

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

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

Машинопись 

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

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

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

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.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });

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

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.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

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

  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.
  map.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: map,
    });

    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("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.ts

JavaScript 

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });
  const bounds = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.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: map,
    });

    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("click", () => {
    infowindow.open(marker.map, marker);
  });
}

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

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

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

Ни одно из событий изменения состояния MVC в системе событий Maps JavaScript API не передает аргументы при запуске события. (Пользовательские события передают аргументы, которые можно проверить.) Если вам нужно проверить свойство при изменении состояния 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
Посмотреть пример

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

Слушайте события DOM

Модель событий Maps JavaScript API создает собственные события и управляет ими. Однако DOM (объектная модель документа) в браузере также создает и отправляет свои собственные события в соответствии с конкретной используемой моделью событий браузера. Если вы хотите фиксировать эти события и реагировать на них, API JavaScript Карт предоставляет статический метод addDomListener() для прослушивания событий DOM и привязки к ним.

Этот удобный метод имеет подпись, показанную ниже:

addDomListener(instance:Object, eventName:string, handler:Function)

где instance может быть любой элемент DOM, поддерживаемый браузером, включая:

  • Иерархические члены DOM, такие как window или document.body. myform
  • Именованные элементы, такие как document.getElementById("foo")

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

Машинопись 

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

  const mapDiv = document.getElementById("map") as HTMLElement;
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.ts

JavaScript 

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const mapDiv = document.getElementById("map");
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.js

HTML 

<html>
  <head>
    <title>Listening to DOM Events</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html
Посмотреть пример

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

Хотя приведенный выше код представляет собой код Maps JavaScript API, метод addDomListener() привязывается к объекту window браузера и позволяет API взаимодействовать с объектами за пределами обычного домена API.

Удаление прослушивателей событий

Чтобы удалить определенный прослушиватель событий, он должен быть назначен переменной. Затем вы можете вызвать 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 */ };