Wydarzenia

Wybierz platformę: Android iOS JavaScript

Na tej stronie opisujemy zdarzenia interfejsu i zdarzenia błędów, które możesz nasłuchiwać i obsługiwać automatycznie.

Zdarzenia w interfejsie

Skrypt JavaScript w przeglądarce jest oparty na zdarzeniach, co oznacza, że JavaScript reaguje na interakcje, generując zdarzenia i oczekuje program nasłuchiwania interesujących wydarzeń. Są 2 rodzaje: wydarzenia:

  • Zdarzenia użytkownika (takie jak zdarzenia kliknięcia) są przekazywane z modelu DOM do Maps JavaScript API. Zdarzenia te są niezależne od do standardowych zdarzeń DOM.
  • Powiadomienia o zmianie stanu MVC odzwierciedlają zmiany w interfejsie Maps JavaScript API obiektów i są nazwane zgodnie z konwencją property_changed.

Każdy obiekt Maps JavaScript API eksportuje liczbę nazwanych zdarzeń. Programy zainteresowane określonymi zdarzeniami rejestrują detektory zdarzeń JavaScriptu dla tych zdarzeń i wykonywać kod po odebraniu tych zdarzeń przez wywołuje metodę addListener() w celu zarejestrowania modułów obsługi zdarzeń w obiekcie.

Z przykładu poniżej dowiesz się, które zdarzenia są wywoływane przez regułę google.maps.Map podczas interakcji z mapą.

Pełną listę zdarzeń znajdziesz w Dokumentacja interfejsu Maps JavaScript API Zdarzenia są wymienione w osobnej sekcji dla każdego obiektu, który je zawiera.

Zdarzenia w interfejsie

Niektóre obiekty w Maps JavaScript API są tak zaprojektowane, by odpowiadały na zdarzenia użytkownika, np. zdarzenia myszy lub klawiatury. Oto na przykład niektórzy użytkownicy zdarzenia, których może nasłuchiwać obiekt google.maps.marker.AdvancedMarkerElement:

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

Pełną listę znajdziesz tutaj AdvancedMarkerElement zajęcia. Mogą one wyglądać jak standardowe zdarzenia DOM, ale w rzeczywistości są częścią Maps JavaScript API. Ponieważ różne przeglądarki implementowanie różnych modeli zdarzeń DOM, Maps JavaScript API, udostępnia te mechanizmy nasłuchiwania zdarzeń DOM i reagowania na nie bez konieczności obsługi różnych funkcji działających w różnych przeglądarkach. Te zdarzenia zwykle przekazują też argumenty w ramach zdarzenia i rejestruje określony stan interfejsu (np. pozycję myszy).

Zmiany stanu MVC

Obiekty MVC zazwyczaj zawierają stan. Gdy zmienia się właściwość obiektu, interfejs Maps JavaScript API wywoła zdarzenie zmiany usługi. Na przykład interfejs API wywoła na mapie zdarzenie zoom_changed, gdy mapa zostanie powiększona zmian poziomów. Można przechwycić te zmiany stanu, wywołując addListener(), aby zarejestrować moduły obsługi zdarzeń na obiekcie.

Zdarzenia użytkownika i zmiany stanu MVC mogą wyglądać podobnie, ale ogólnie wolisz traktują je inaczej w kodzie. Na przykład zdarzenia MVC nie są przekazywane argumentów w ich wydarzeniu. Musisz sprawdzić nieruchomość, zmienionej przy zmianie stanu MVC przez wywołanie odpowiedniej getProperty na tym obiekcie.

Obsługa zdarzeń

Aby zarejestrować się, aby otrzymywać powiadomienia o wydarzeniach, skorzystaj z addListener() do obsługi zdarzeń. Ta metoda odbiera nasłuchiwane zdarzenie, do wywołania po wystąpieniu określonego zdarzenia.

Przykład: zdarzenia mapy i znaczników

Ten kod łączy zdarzenia użytkownika ze zdarzeniami zmiany stanu. Załączamy modułu obsługi zdarzeń do znacznika, który po kliknięciu powiększa mapę. Dodajemy też modułu obsługi zdarzeń na mapie na potrzeby zmian właściwości center oraz przesuń mapę z powrotem do znacznika po 3 sekundach od otrzymania center_changed zdarzenie:

TypeScript

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
Zobacz przykład

Zobacz próbkę

Wskazówka: jeśli próbujesz wykryć zmianę w widoczny obszar, użyj konkretnego zdarzenia bounds_changed zamiast składowych zoom_changed i Wydarzenia: center_changed. Ponieważ Maps JavaScript API uruchamia te ostatnie zdarzenia niezależnie, getBounds() może nie zgłosić przydatnych wyników do czasu, gdy widoczny obszar zostanie znacząco zmieniony. Jeśli chcesz getBounds() po takim zdarzeniu, posłuchaj utworu bounds_changed zamiast tego.

Przykład: edycja kształtów i przeciąganie zdarzeń

Gdy kształt jest edytowany lub przeciągnięty, zdarzenie jest wywoływane po zakończeniu działania. Listę zdarzeń i niektóre fragmenty kodu znajdziesz w materiałach na temat Kształty.

Wyświetl (rectangle-event.html)

Dostęp do argumentów w zdarzeniach interfejsu

Zdarzenia interfejsu w Maps JavaScript API zwykle przekazują argument zdarzenia, do których detektor zdarzeń ma dostęp, zwracając uwagę na stan UI zdarzenie. Na przykład zdarzenie 'click' w interfejsie użytkownika zwykle przechodzi element MouseEvent zawierający właściwość latLng oznaczającą wybrana lokalizacja na mapie. Pamiętaj, że to działanie jest charakterystyczne dla interfejsu użytkownika. wydarzenia; Zmiany stanu MVC nie przekazują argumentów w zdarzeniach.

W taki sam sposób możesz uzyskać dostęp do argumentów zdarzenia w detektorze zdarzeń nie uzyskasz dostępu do właściwości obiektu. Poniższy przykład dodaje zdarzenie detektor mapy i tworzy znacznik, gdy użytkownik kliknie mapę w wybranej lokalizacji.

TypeScript

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
Zobacz przykład

Zobacz próbkę

Używanie zamykania w detektorach zdarzeń

Przy uruchamianiu detektora zdarzeń dobrze jest mieć zarówno prywatne i trwałe dane dołączone do obiektu. JavaScript nie obsługuje tryb „prywatny” danych instancji, ale obsługuje zamknięcia, które umożliwiają funkcjom wewnętrznym dostęp do zewnętrznych zmiennych. Zamknięcia są przydatne w detektorach zdarzeń, aby uzyskiwać dostęp do zmiennych, które nie zwykle dołączone do obiektów, na których mają miejsce zdarzenia.

W przykładzie poniżej użyto zamknięcia funkcji w detektorze zdarzeń przypisać tajną wiadomość do zestawu znaczników. Kliknięcie każdego znacznika spowoduje i ujawnić część tajnej wiadomości, która nie jest zawarta w znacznik.

TypeScript

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
Zobacz przykład

Zobacz próbkę

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

Żadne ze zdarzeń zmiany stanu MVC w ramach przekazywania w systemie zdarzeń interfejsu Maps JavaScript API argumentów po wywołaniu zdarzenia. (Zdarzenia użytkownika i argumentów, które można sprawdzać). Jeśli chcesz sprawdzić usługę przy zmianie stanu MVC, musisz jawnie wywołać odpowiednią getProperty() na tym obiekcie. Ten inspekcja zawsze pobiera bieżący stan MVC. , który może nie być stanem w momencie pierwszego wywołania zdarzenia.

Uwaga: jawne ustawienie właściwości w obrębie modułu obsługi zdarzeń, który reaguje na zmianę stanu określonej w usłudze może powodować nieprzewidywalne lub niepożądane zachowanie. Ustawienie wywoła nowe zdarzenie, jeśli np. zawsze ustaw właściwość w ramach tego modułu obsługi zdarzeń, może to spowodować utworzenie kodu nieskończone pętlę.

W przykładzie poniżej skonfigurowaliśmy moduł obsługi zdarzeń, który będzie reagować przez wyświetlenie okna informacyjnego z informacją o danym poziomie.

TypeScript

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
Zobacz przykład

Zobacz próbkę

Wykrywaj zdarzenia DOM

Model zdarzeń Maps JavaScript API tworzy własny model zdarzeń i nim zarządza zdarzenia niestandardowe. DOM (Document Object Model) w przeglądarce tworzy i wysyła własne zdarzenia odpowiednio model zdarzeń przeglądarki. Aby zarejestrować te dane i na nie zareagować, zdarzenia, interfejs Maps JavaScript API udostępnia Metoda statyczna addDomListener(), która nasłuchuje zdarzeń DOM i je tworzy.

Ta wygodna metoda ma podpis, jak pokazano poniżej:

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, np. document.getElementById("foo")

Zwróć uwagę, że addDomListener() zalicza wskazane zdarzenie po stronie przeglądarki, która obsługuje je zgodnie z jej modelem zdarzenia DOM; jednak prawie wszystkie nowoczesne przeglądarki obsługują przynajmniej DOM poziomu 2. (Więcej informacji o zdarzeniach na poziomie DOM. Poziomy DOM Mozilla reference.)

TypeScript

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
Zobacz przykład

Zobacz próbkę

Chociaż powyższy kod jest kodem interfejsu Maps JavaScript API, tag Metoda addDomListener() łączy się z obiektem window przeglądarki i umożliwia interfejsowi API komunikację z obiektami poza zwykła domena interfejsu API.

Usuń detektory zdarzeń

Aby usunąć konkretny detektor zdarzeń, musi on być przypisany do . Następnie możesz zadzwonić pod numer removeListener(), w którym przekazano nazwę zmiennej, do której przypisano detektor.

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

google.maps.event.removeListener(listener1);

Aby usunąć wszystkie detektory z określonej instancji, wywołaj clearInstanceListeners(), przekazując 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 określonego typu zdarzenia w określonej instancji: wywołaj clearListeners(), przekazując nazwę instancji i zdarzenie imię i nazwisko.

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 referencyjnej google.maps.event.

Wykrywaj błędy uwierzytelniania

Aby automatycznie wykrywać błąd uwierzytelniania (na przykład aby automatycznie wysyłać beacon), możesz przygotować funkcję wywołania zwrotnego. Jeśli określona poniżej funkcja globalna jest zdefiniowana, zostanie ona wywołana podczas nie uda się uwierzytelnić. function gm_authFailure() { /* Code */ };