Etkinlikler

Platform seçin: Android iOS JavaScript

Bu sayfada, dinleyebileceğiniz ve işleyebileceğiniz kullanıcı arayüzü etkinlikleri ve hata etkinlikleri açıklanmaktadır daha fazla bilgi edindiniz.

Kullanıcı Arayüzü Etkinlikleri

Tarayıcıdaki JavaScript etkinliğe dayalıdır. Diğer bir deyişle, JavaScript, etkileşimlere etkinlik oluşturarak yanıt verir ve İlginç etkinlikleri dinleme olanağı sunan bir program. İki tür etkinlikler:

• Kullanıcı etkinlikleri (ör. "tıklama" fare etkinlikleri) DOM'den Maps JavaScript API'yi kullanıyor. Bu etkinlikler birbirinden ayrıdır ve standart DOM etkinlikleri için geçerlidir.
• MVC durum değişikliği bildirimleri, Maps JavaScript API'deki değişiklikleri yansıtır nesneleri içerir ve property_changed kuralı kullanılarak adlandırılır.

Her bir Maps JavaScript API nesnesi, bir dizi adlandırılmış etkinliği dışa aktarır. Belirli etkinliklerle ilgilenen programlar JavaScript etkinlik işleyicilerini kaydeder bu etkinlikler için çalışır ve bu etkinlikler nesnede etkinlik işleyicileri kaydetmek için addListener() çağrılıyor.

Aşağıdaki örnek, google.maps.Map tarafından tetiklenen etkinlikleri gösterecektir. etkileşimde bulunursunuz.

Etkinliklerin tam listesi için şuraya bakın: Haritalar JavaScript API Referansı. Etkinlikler, etkinlikleri içeren her nesne için ayrı bir bölümde listelenir.

Kullanıcı Arayüzü Etkinlikleri

Maps JavaScript API'deki bazı nesneler, kullanıcı etkinlikleri (ör. fare veya klavye etkinlikleri) için de geçerlidir. Örneğin, bunlar kullanıcılardan bazıları bir google.maps.marker.AdvancedMarkerElement nesnesinin dinleyebileceği etkinlikler:

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

Tam liste için bkz. AdvancedMarkerElement sınıfını kullanır. Bu etkinlikler, standart DOM etkinlikleri gibi görünse de aslında birer parçası olan etkinliklerdir. hakkında daha fazla bilgi edinin. Çünkü farklı tarayıcılar Maps JavaScript API'yi ve farklı DOM etkinlik modellerini bu mekanizmaların DOM etkinliklerini dinlemesi ve yanıt vermesi için tarayıcılar arası çeşitli özellikleri işleme alabilir. Bu etkinlikler genellikle bir kullanıcı arayüzü durumu (fare konumu gibi) belirterek etkinlik içinde bir yere dokunun.

MVC Durum Değişiklikleri

MVC nesneleri genellikle durum içerir. Bir nesnenin özelliği değiştiğinde, Maps JavaScript API, mülkün değiştiği bir etkinliği tetikler. Örneğin, harita yakınlaştırma yapıldığında API, harita üzerinde bir zoom_changed etkinliği tetikler. seviye değişiklikleridir. Bu durum değişikliklerini önlemek için addListener() öğesini kullanarak nesnede de etkinlik işleyicileri kaydedin.

Kullanıcı etkinlikleri ve MVC durumu değişiklikleri benzer görünebilir ancak genellikle kullanabilirsiniz. Örneğin, MVC etkinlikleri bağımsız değişkendir. Bu durumda, izin verdiğiniz mülkü MVC durumu değişikliğinde ilgili getProperty yöntemini çağırın.

Etkinlikleri Yönetme

Etkinlik bildirimlerine kaydolmak için addListener() kullanın etkinlik işleyici olabilir. Bu yöntemde dinlemek için bir etkinlik gerekir işlevini çağırın.

Örnek: Harita ve İşaretçi Etkinlikleri

Aşağıdaki kod, kullanıcı etkinliklerini durum değişikliği etkinlikleriyle bir araya getirir. Bir etkinlik işleyiciyi, tıklandığında haritayı yakınlaştıran bir işaretçiye ekler. Ayrıca center özelliğinde ve haritadaki değişiklikler için haritaya etkinlik işleyici bildirimi aldıktan 3 saniye sonra haritayı tekrar işaretçiye kaydırın center_changed etkinlik:

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

.

Not: TypeScript ve Google Haritalar'ı kullanma ile ilgili kılavuzu okuyun.

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

.

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

İpucu: Şu ayrıntılarda bir değişiklik tespit etmeye çalışıyorsanız: kullanmak istiyorsanız, ilgili bounds_changed etkinliğini kullandığınızdan emin olun bileşen zoom_changed ve center_changed etkinlik. Maps JavaScript API, diğer etkinlikleri bağımsız olarak tetiklerse, getBounds() yararlı sonuçlar bildirmeyebilir tanındıktan sonra otomatik olarak değiştirilir. Şunu yapmak istiyorsanız: getBounds() gibi bir etkinlikten sonra şunu dinlediğinizden emin olun: Bunun yerine bounds_changed etkinliği.

Örnek: Şekil Düzenleme ve Sürükleme Etkinlikleri

Bir şekil düzenlendiğinde veya sürüklendiğinde, işlemin tamamlanmasının ardından bir etkinlik tetiklenir. eyleme dökülebilir. Etkinliklerin ve bazı kod snippet'lerinin listesi için bkz. Şekiller.

Görüntüleyin örnek (rectangle-event.html)

Kullanıcı Arayüzü Etkinliklerindeki Erişim Bağımsız Değişkenleri

Maps JavaScript API'deki kullanıcı arayüzü etkinlikleri genellikle bir etkinlik bağımsız değişkenini iletir. Bu alana, etkinlik işleyici tarafından erişilebilir; etkinlik gerçekleşti. Örneğin, bir kullanıcı arayüzü 'click' etkinliği genellikle şunu belirten bir latLng özelliği içeren bir MouseEvent: haritada tıklanan konuma. Bu davranışın kullanıcı arayüzüne özel olduğunu unutmayın etkinlikler; MVC durum değişiklikleri, etkinliklerindeki bağımsız değişkenleri iletmez.

Bir etkinlik işleyici içindeki etkinliğin bağımsız değişkenlerine de aynı şekilde erişebilirsiniz. bir nesnenin özelliklerine erişirsiniz. Aşağıdaki örnekte, Harita işleyicisi vardır ve kullanıcı harita üzerinde tıkladığında bir işaretçi oluşturur. tıklanan konum.

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

.

Not: TypeScript ve Google Haritalar'ı kullanma ile ilgili kılavuzu okuyun.

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

.

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Etkinlik İşleyicilerde Kapatmaları Kullanma

Bir etkinlik işleyiciyi yürütürken, aynı anda hem çalışan hem de gizli ve kalıcı verilerdir. JavaScript, "gizli"yi destekle olsa da bunlar, örnek verilerini iç işlevlerin dış mekana erişmesini sağlayan closures değişkenlerine karşılık gelir. Kapanışlar etkinlik işleyicilerin, normalde olayların gerçekleştiği nesnelere bağlanır.

Aşağıdaki örnekte, aşağıdakileri yapmak için etkinlik işleyicide bir işlev kapanışı kullanılmaktadır: bir dizi işaretçiye gizli bir mesaj atama. Her bir işaretçiyi tıkladığınızda, gizli mesajın bir kısmını açığa çıkarır. Bu kısmı, kullanabilirsiniz.

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

.

Not: TypeScript ve Google Haritalar'ı kullanma ile ilgili kılavuzu okuyun.

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

.

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Etkinlik İşleyicilerinde Mülk Alma ve Ayarlama

Maps JavaScript API etkinlik sistemi kartındaki MVC durum değişikliği etkinliklerinden hiçbiri bağımsız değişkenlerin sayısını belirler. (Kullanıcı etkinlikleri incelenebilecek bağımsız değişkenler iletin.) Bir mülkü incelemeniz gerekiyorsa bir MVC durumu değişikliğinde getProperty() yöntemini çağırın. Bu inceleme her zaman MVC'nin geçerli durumunu alır Bu nesne, etkinliğin ilk tetiklendiği andaki durum olmayabilir.

Not: Şurada açıkça bir mülk ayarlayın: o belirli bir durum değişikliğine yanıt veren bir olay işleyici özelliği, tahmin edilemeyen ve/veya istenmeyen davranışlara neden olabilir. Ayar yeni bir etkinlik tetikler. Örneğin her zaman bu etkinlik işleyici içinde bir mülk belirlediğinizde, sonsuz döngüdür.

Aşağıdaki örnekte, yanıt vermesi için bir etkinlik işleyici oluşturduk düzeyi gösteren bir bilgi penceresi açarak etkinlikleri yakınlaştırıp uzaklaştırın.

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

.

Not: TypeScript ve Google Haritalar'ı kullanma ile ilgili kılavuzu okuyun.

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

.

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

DOM Etkinliklerini dinleme

Maps JavaScript API etkinlik modeli kendi özel etkinlikler. Ancak tarayıcıdaki DOM (Doküman Nesne Modeli) kullanıcının belirlediği bilgilere göre kendi etkinliklerini oluşturur kullanılan tarayıcı etkinlik modeli. Bunları yakalayıp bunlara yanıt vermek isterseniz Maps JavaScript API, kullanıcılara DOM etkinliklerini dinlemek ve bağlamak için addDomListener() statik yöntem.

Bu kolaylık yöntemi, aşağıda gösterildiği gibi bir imzaya sahiptir:

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

Burada instance, tarayıcı tarafından desteklenen herhangi bir DOM öğesi olabilir. şunları içerir:

• DOM'nin window veya document.body.myform
• document.getElementById("foo") gibi adlandırılmış öğeler

addDomListener() adlı çevrenin belirtilen etkinliğin geçtiğine dikkat edin ve tarayıcı DOM etkinlik modeline göre işleyen tarayıcı; Ancak neredeyse tüm modern tarayıcılar en azından DOM Düzeyi 2'yi destekler. (Daha fazla daha fazla bilgi için Mozilla DOM Düzeyleri 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

.

Not: TypeScript ve Google Haritalar'ı kullanma ile ilgili kılavuzu okuyun.

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

.

Not: JavaScript, TypeScript snippet'inden derlenir.

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

Örneği inceleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Yukarıdaki kod Maps JavaScript API kodu olsa da, addDomListener() yöntemi window nesnesine bağlanır ve API'nin harici başka nesnelerle iletişim kurmasına olanak tanır. API'nin normal alanı.

Etkinlik İşleyicileri Kaldır

Belirli bir etkinlik işleyiciyi kaldırmak için etkinlik işleyicinin değişkenine eklenmelidir. Ardından removeListener() numaralı telefonu arayabilirsiniz. işleyicinin atandığı değişken adını iletmesini sağlar.

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

google.maps.event.removeListener(listener1);

Belirli bir örnekten tüm işleyicileri kaldırmak için şunu çağırın: clearInstanceListeners(), örnek adını iletir.

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

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

Belirli bir örnekte belirli bir etkinlik türünün tüm işleyicilerini kaldırmak için: clearListeners() çağrısıyla örnek adını ve etkinliği iletir dokunun.

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

Daha fazla bilgi için google.maps.event ad alanı.

Kimlik doğrulama hatalarını dinle

Bir kimlik doğrulama hatasını (örneğin, bir işaretçiyi otomatik olarak göndermek için) bir geri çağırma işlevi hazırlayabilirsiniz. Aşağıdaki genel fonksiyon tanımlanmışsa kimlik doğrulama başarısız olur. function gm_authFailure() { /* Code */ };