Zdarzenia

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript

Na tej stronie opisaliśmy zdarzenia w interfejsie oraz zdarzenia błędów, które można nasłuchiwać i obsługiwać w sposób zautomatyzowany.

Zdarzenia w interfejsie

Kod JavaScript w przeglądarce jest generowany na podstawie zdarzeń, co oznacza, że JavaScript odpowiada na interakcje przez generowanie zdarzeń i oczekuje, że program słucha interesujących zdarzeń. Są 2 rodzaje zdarzeń:

  • Zdarzenia użytkownika (np. "click" zdarzenia myszy) są rozpowszechniane z interfejsu DOM do interfejsu Maps JavaScript API. Te zdarzenia są odrębne od standardowych zdarzeń DOM.
  • Powiadomienia o zmianach stanu MVC odzwierciedlają zmiany w obiektach Maps JavaScript API i są nazywane zgodnie z konwencją property_changed.

Każdy obiekt API JavaScript Map Google eksportuje wiele nazwanych zdarzeń. Programy zainteresowane określonymi zdarzeniami będą rejestrować detektory zdarzeń dla tych zdarzeń i wykonywać kod po otrzymaniu tych zdarzeń przez wywołanie metody addListener() do rejestrowania modułów obsługi zdarzeń.

Poniższy przykład pokazuje, jakie zdarzenia są wywoływane przez google.maps.Map podczas interakcji z mapą.

Pełną listę zdarzeń znajdziesz w dokumentacji API JavaScript Map Google. Zdarzenia są wymienione w oddzielnej sekcji dla każdego obiektu zawierającego zdarzenia.

Zdarzenia interfejsu

Niektóre obiekty interfejsu API JavaScriptu Map Google są zaprojektowane w taki sposób, aby reagować na zdarzenia użytkownika, np. myszy lub klawiatury. Oto niektóre zdarzenia użytkownika, których obiekt google.maps.Marker może nasłuchiwać:

  • 'click'
  • 'dblclick'
  • 'mouseup'
  • 'mousedown'
  • 'mouseover'
  • 'mouseout'

Pełną listę znajdziesz w klasie Marker. Mogą one wyglądać jak standardowe zdarzenia DOM, ale są częścią interfejsu Maps JavaScript API. Ponieważ różne przeglądarki implementują różne modele zdarzeń DOM, interfejs Maps JavaScript API zapewnia te mechanizmy, które wykrywają i reagują na zdarzenia DOM bez konieczności obsługi różnych osobowości przeglądarek. Te zdarzenia zwykle przekazują argumenty w zdarzeniu, informując o niektórych stanach interfejsu (np. pozycji myszy).

Zmiany stanu MVC

Obiekty MVC zwykle zawierają stan. Za każdym razem, gdy zmieni się właściwość, interfejs Maps JavaScript API uruchomi zdarzenie, które uległo zmianie. Na przykład interfejs API będzie wywoływać zdarzenie zoom_changed na mapie w przypadku zmiany poziomu powiększenia mapy. Możesz przechwycić te zmiany stanu, wywołując właściwość addListener(), aby zarejestrować moduły obsługi zdarzeń.

Zmiany dotyczące zdarzeń użytkownika i konwersji po wyświetleniu angażującym mogą wyglądać podobnie, ale zazwyczaj chcesz traktować je w kodzie inaczej. Na przykład zdarzenia MVC nie przekazują argumentów w obrębie zdarzenia. Możesz sprawdzić właściwość, która zmieniła się po zmianie stanu MVC, wywołując odpowiednią metodę getProperty w tym obiekcie.

Obsługa zdarzeń

Aby zarejestrować się w celu otrzymywania powiadomień o zdarzeniach, użyj modułu obsługi zdarzeń addListener(). Ta metoda odbiera zdarzenie, aby nasłuchiwać, i wywołuje funkcję, gdy wystąpi określone zdarzenie.

Przykład: zdarzenia związane z mapą i znacznikami

Ten kod łączy zdarzenia użytkownika ze zdarzeniami zmiany stanu. Do znacznika dołączamy znacznik, który powiększa mapę po kliknięciu. Dodajemy też do mapy moduł obsługi zdarzeń w przypadku zmian we właściwości center i mapujemy go z powrotem do znacznika po 3 sekundach od otrzymania zdarzenia center_changed:

TypeScript

function initMap(): void {
  const myLatlng = { lat: -25.363, lng: 131.044 };

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

  const marker = new google.maps.Marker({
    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.getPosition() as google.maps.LatLng);
    }, 3000);
  });

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
  });
  const marker = new google.maps.Marker({
    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.getPosition());
    }, 3000);
  });
  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}

window.initMap = initMap;
Zobacz przykład

Fragment

Wskazówka: jeśli chcesz wykryć zmianę w widocznym obszarze, użyj konkretnego zdarzenia bounds_changed, a nie zdarzeń charakterystycznych dla zoom_changed i center_changed. Interfejs Maps JavaScript API uruchamia te zdarzenia niezależnie, dlatego getBounds() nie może podawać przydatnych wyników, dopóki widoczny obszar nie zmieni się automatycznie. Jeśli po tym zdarzeniu chcesz posłuchać getBounds(), pamiętaj, by zamiast tego posłuchać zdarzenia bounds_changed.

Przykład: edytowanie i przeciąganie kształtów

Podczas edytowania lub przeciągania kształtu zdarzenie jest wywoływane po zakończeniu działania. Listę zdarzeń i niektóre fragmenty kodu znajdziesz w artykule Kształty.

Wyświetl przykład (rectangle-event.html)

Dostęp do argumentów w zdarzeniach interfejsu

Zdarzenia interfejsu użytkownika interfejsu Maps JavaScript API zazwyczaj przekazują argument zdarzenia, do którego może uzyskać dostęp detektor zdarzeń, i odnotowuje stan interfejsu, gdy wystąpiło zdarzenie. Na przykład zdarzenie 'click' interfejsu użytkownika zwykle przekazuje właściwość MouseEvent zawierającą właściwość latLng wskazującą klikniętą lokalizację na mapie. Jest to działanie charakterystyczne dla zdarzeń w interfejsie użytkownika. Zmiany stanu MVC nie przekazują argumentów w ich zdarzeniach.

Dostęp do argumentów zdarzenia w detektorze zdarzeń możesz uzyskać w taki sam sposób jak do właściwości obiektu. Poniższy przykład dodaje odbiornik zdarzeń na mapie i tworzy znacznik, gdy użytkownik kliknie mapę w klikniętej lokalizacji.

TypeScript

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

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

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

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

function placeMarkerAndPanTo(latLng, map) {
  new google.maps.Marker({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

window.initMap = initMap;
Zobacz przykład

Fragment

Korzystanie z funkcji Zamknij w detektorach zdarzeń

Podczas wykonywania detektora zdarzeń często dobrze jest dołączyć do obiektu zarówno prywatne, jak i trwałe dane. JavaScript nie obsługuje danych z operatora "prywatne&quot, ale obsługuje zamknięcia, co umożliwia wewnętrznym dostępom do zmiennych zewnętrznych. Zamknięcie jest przydatne w przypadku słuchaczy zdarzeń, by uzyskać dostęp do zmiennych, które nie są zwykle dołączane do obiektów, na których występują zdarzenia.

Poniższy przykład pokazuje zamknięcie funkcji w detektorze zdarzeń w celu przypisania tajnej wiadomości do zbioru znaczników. Gdy klikniesz każdy znacznik, wyświetli się część jego tajnego komunikatu, która nie jest zawarta w samym znaczniku.

TypeScript

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

  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({
      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,
  secretMessage: string
) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.get("map"), marker);
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
  });
  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({
      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.get("map"), marker);
  });
}

window.initMap = initMap;
Zobacz przykład

Fragment

Pobieranie i ustawianie właściwości w modułach obsługi zdarzeń

Żadne zdarzenie zmiany stanu MVC w systemie zdarzeń Maps JavaScript API nie przekazuje argumentów po wywołaniu zdarzenia. (Zdarzenia użytkownika przekazują argumenty, które można sprawdzać). Jeśli chcesz sprawdzić właściwość w przypadku zmiany stanu MVC, musisz wyraźnie wywołać odpowiednią metodę getProperty() w tym obiekcie. Ta kontrola zawsze pobiera bieżący stan obiektu MVC, który może nie być stanem po pierwszym uruchomieniu zdarzenia.

Uwaga: jednoznaczne określenie właściwości w module obsługi zdarzeń, która odpowiada na zmianę stanu tej konkretnej usługi, może spowodować nieprzewidywalne lub niepożądane zachowanie. Ustawienie takiej właściwości spowoduje np. uruchomienie nowego zdarzenia, a jeśli zawsze ustawisz usługę w tym module obsługi zdarzeń, może się okazać, że utworzysz nieskończoną pętlę.

W przykładzie poniżej konfigurujemy moduł obsługi zdarzeń, aby reagować na zdarzenia powiększenia. W tym celu wyświetlamy okno informacyjne z danym poziomem.

TypeScript

function initMap(): void {
  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()!);
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  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());
  });
}

window.initMap = initMap;
Zobacz przykład

Fragment

Słuchanie zdarzeń DOM

Model zdarzeń interfejsu API JavaScript JavaScript tworzy własne zdarzenia niestandardowe i zarządza nimi. Jednak DOM (model obiektu dokumentu) w przeglądarce tworzy i wysyła własne zdarzenia zgodnie z konkretnym modelem zdarzenia przeglądarki. Jeśli chcesz przechwytywać te zdarzenia i odpowiadać na nie, interfejs Maps JavaScript API udostępnia metodę statyczną addDomListener() do nasłuchiwania i łączenia zdarzeń DOM.

Ta metoda wygodny ma podpis w następujący sposób:

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

gdzie instance może być dowolnym elementem DOM obsługiwanym przez przeglądarkę, w tym:

  • Hierarchiczne elementy DOM, takie jak window lub document.body.myform
  • Elementy nazwane, tak jak document.getElementById("foo")

Zwróć uwagę, że komponent addDomListener() przekazuje wskazane zdarzenie do przeglądarki, które obsługuje je zgodnie ze modelem DOM przeglądarki, jednak prawie wszystkie nowoczesne przeglądarki obsługują co najmniej 2 poziom DOM. Więcej informacji o zdarzeniach na poziomie DOM znajdziesz w artykule Poziomy DOM Mozilla.

TypeScript

function initMap(): void {
  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!");
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  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!");
  });
}

window.initMap = initMap;

HTML

<html>
  <head>
    <title>Listening to DOM Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Zobacz przykład

Fragment

Powyższy kod jest kodem interfejsu Maps JavaScript API, ale metoda addDomListener() łączy się z obiektem window przeglądarki i umożliwia interfejsowi API komunikowanie się z obiektami spoza standardowej domeny API.

Usuwanie detektorów zdarzeń

Aby usunąć określony detektor zdarzeń, musi być przypisany do zmiennej. Następnie możesz wywołać removeListener(), przekazując nazwę zmiennej, do której przypisano detektor.

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

google.maps.event.removeListener(listener1);

Aby usunąć wszystkie detektory z konkretnej instancji, wywołaj clearInstanceListeners() i przekaż nazwę instancji.

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

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

Aby usunąć wszystkie detektory konkretnego typu zdarzenia w przypadku konkretnej instancji, wywołaj clearListeners(), podając nazwę instancji i nazwę zdarzenia.

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');

Więcej informacji znajdziesz w dokumentacji przestrzeni nazw google.maps.event.

Wykrywanie błędów uwierzytelniania

Jeśli chcesz automatycznie wykrywać błąd uwierzytelniania (na przykład automatycznie wysyłać obraz typu beacon), możesz przygotować funkcję wywołania zwrotnego. Jeśli zdefiniowano poniższą funkcję globalną, zostanie ona wywołana w przypadku nieudanego uwierzytelniania. function gm_authFailure() { /* Code */ };