Etkinlikler

Platform seçin: Android iOS JavaScript

Bu sayfada, programatik olarak dinleyip işleyebileceğiniz kullanıcı arayüzü etkinlikleri ve hata etkinlikleri açıklanmaktadır.

Kullanıcı Arayüzü Etkinlikleri

Tarayıcıdaki JavaScript etkinlik odaklı bir dildir. Yani JavaScript, etkinlikler oluşturarak etkileşimlere yanıt verir ve programın ilginç etkinlikleri dinlemesini bekler. İki tür etkinlik vardır:

  • Kullanıcı etkinlikleri ("tıklama" fare etkinlikleri gibi), DOM'den Haritalar JavaScript API'sine iletilir. Bu etkinlikler, standart DOM etkinliklerinden ayrı ve farklıdır.
  • MVC durum değişikliği bildirimleri, Maps JavaScript API nesnelerindeki değişiklikleri yansıtır ve property_changed kuralı kullanılarak adlandırılır.

Her Haritalar JavaScript API nesnesi, bir dizi adlandırılmış etkinlik dışa aktarır. Belirli etkinliklerle ilgilenen programlar, bu etkinlikler için JavaScript etkinlik dinleyicileri kaydeder ve bu etkinlikler alındığında addListener() çağrılarak nesneye etkinlik işleyicileri kaydedilir.

Aşağıdaki örnekte, harita ile etkileşimde bulunduğunuzda google.maps.Map tarafından hangi etkinliklerin tetiklendiği gösterilmektedir.

Etkinliklerin tam listesi için Maps JavaScript API Referansı'na bakın. Etkinlikler, etkinlik içeren her nesne için ayrı bir bölümde listelenir.

Kullanıcı Arayüzü Etkinlikleri

Haritalar JavaScript API'sindeki bazı nesneler, fare veya klavye etkinlikleri gibi kullanıcı etkinliklerine yanıt verecek şekilde tasarlanmıştır. Örneğin, bir google.maps.marker.AdvancedMarkerElement nesnesinin dinleyebileceği kullanıcı etkinliklerinden bazıları şunlardır:

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

Tam liste için AdvancedMarkerElement sınıfına bakın. Bu etkinlikler standart DOM etkinliklerine benzeyebilir ancak aslında Maps JavaScript API'nin bir parçasıdır. Farklı tarayıcılar farklı DOM etkinlik modelleri uyguladığından Haritalar JavaScript API'si, tarayıcılar arası çeşitli özellikleri yönetmek zorunda kalmadan DOM etkinliklerini dinlemek ve bunlara yanıt vermek için bu mekanizmaları sağlar. Bu etkinlikler genellikle etkinlik içinde bazı kullanıcı arayüzü durumlarını (ör. fare konumu) belirten bağımsız değişkenler de iletir.

MVC Durum Değişiklikleri

MVC nesneleri genellikle durum içerir. Bir nesnenin özelliği değiştiğinde, Maps JavaScript API, özelliğin değiştiğine dair bir etkinlik tetikler. Örneğin, haritanın yakınlaştırma seviyesi değiştiğinde API, haritayla ilgili bir zoom_changed etkinliği tetikler. Nesneye etkinlik işleyicileri de kaydetmek için addListener() çağrısını yaparak bu durum değişikliklerini durdurabilirsiniz.

Kullanıcı etkinlikleri ve MVC durum değişiklikleri benzer görünse de genellikle kodunuzda bunları farklı şekilde ele almak istersiniz. Örneğin, MVC etkinlikleri kendi etkinliklerinde bağımsız değişkenler iletmez. İlgili nesnede uygun getProperty yöntemini çağırarak MVC durum değişikliğinde değişen mülkü incelemeniz gerekir.

Etkinlikleri işleme

Etkinlik bildirimlerine kaydolmak için addListener() etkinlik işleyicisini kullanın. Bu yöntem, dinlenecek bir etkinlik ve belirtilen etkinlik gerçekleştiğinde çağrılacak bir işlev alır.

Örnek: Harita ve İşaretçi Etkinlikleri

Aşağıdaki kod, kullanıcı etkinliklerini durum değişikliği etkinlikleriyle karıştırır. Tıklandığında haritayı yakınlaştıran bir etkinlik işleyiciyi işaretçiye ekleriz. Ayrıca, center mülkünde yapılan değişiklikler için haritaya bir etkinlik işleyici ekliyoruz ve center_changed etkinliği alındıktan 3 saniye sonra haritayı işaretçiye geri kaydırıyoruz:

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
Örneği görüntüleyin

Örneği Deneyin

İpucu: Görüntü alanında bir değişiklik algılamaya çalışıyorsanız zoom_changed ve center_changed etkinlikleri yerine belirli bounds_changed etkinliğini kullandığınızdan emin olun. Maps JavaScript API, bu son etkinlikleri bağımsız olarak tetiklediğinden getBounds(), görüntü alanı yetkili bir şekilde değişene kadar yararlı sonuçlar bildirmeyebilir. Bu tür bir etkinlikten sonra getBounds() yapmak istiyorsanız bunun yerine bounds_changed etkinliğini dinlediğinizden emin olun.

Örnek: Şekil Düzenleme ve Etkinlikleri Kaydırma

Bir şekil düzenlendiğinde veya sürüklendiğinde, işlem tamamlandıktan sonra bir etkinlik tetiklenir. Etkinliklerin listesi ve bazı kod snippet'leri için Şekiller bölümüne bakın.

Örneği görüntüleyin (rectangle-event.html)

Kullanıcı Arayüzü Etkinliklerinde Bağımsız Değişkenlere Erişim

Haritalar JavaScript API'sindeki kullanıcı arayüzü etkinlikleri genellikle bir etkinlik bağımsız değişkeni iletirler. Bu bağımsız değişkene etkinlik işleyici tarafından erişilebilir ve etkinlik gerçekleştiğindeki kullanıcı arayüzü durumunu belirtir. Örneğin, kullanıcı arayüzü 'click' etkinliği genellikle haritada tıklanan konumu belirten bir latLng mülkü içeren bir MouseEvent iletir. Bu davranışın kullanıcı arayüzü etkinliklerine özgü olduğunu unutmayın. MVC durum değişiklikleri, etkinliklerinde bağımsız değişkenler iletmez.

Bir etkinlik dinleyicisinde etkinliğin bağımsız değişkenlerine, bir nesnenin özelliklerine eriştiğiniz şekilde erişebilirsiniz. Aşağıdaki örnekte, harita için bir etkinlik dinleyici eklenmiş ve kullanıcı haritayı tıkladığında tıklanan konumda bir işaretçi oluşturulmuştur.

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
Örneği görüntüleyin

Örneği Deneyin

Etkinlik işleyicilerde kapatma kullanma

Bir etkinlik dinleyicisini çalıştırırken genellikle bir nesneye hem gizli hem de kalıcı verilerin eklenmiş olması avantajlıdır. JavaScript, "gizli" örnek verilerini desteklemez ancak iç işlevlerin dış değişkenlere erişmesine olanak tanıyan kapsayıcıları destekler. Kapsüllemeler, normalde etkinliklerin gerçekleştiği nesnelere bağlı olmayan değişkenlere erişmek için etkinlik dinleyicileri içinde kullanışlıdır.

Aşağıdaki örnekte, bir işaretçi grubuna gizli mesaj atamak için etkinlik işleyicide işlev kapatma kullanılır. Her işaretçiyi tıkladığınızda, gizli mesajın işaretçide bulunmayan bir bölümü gösterilir.

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
Örneği görüntüleyin

Örneği Deneyin

Etkinlik işleyicilerinde özellik alma ve ayarlama

Maps JavaScript API etkinlik sistemindeki MVC durum değişikliği etkinliklerinin hiçbiri, etkinlik tetiklendiğinde bağımsız değişkenler iletmez. (Kullanıcı etkinlikleri, incelenebilecek bağımsız değişkenler iletmez.) MVC durum değişikliğinde bir mülkü incelemeniz gerekiyorsa söz konusu nesnede uygun getProperty() yöntemini açıkça çağırmanız gerekir. Bu denetim, MVC nesnesinin her zaman mevcut durumunu alır. Bu durum, etkinliğin ilk tetiklendiği durum olmayabilir.

Not: Belirli bir mülkün durum değişikliğine yanıt veren bir etkinlik işleyici içinde bir mülkü açıkça ayarlamak, öngörülemeyen ve/veya istenmeyen davranışlara neden olabilir. Örneğin, böyle bir mülkü ayarlamak yeni bir etkinliği tetikler. Bu etkinlik işleyici içinde her zaman bir mülk ayarlarsanız sonsuz bir döngü oluşturabilirsiniz.

Aşağıdaki örnekte, yakınlaştırma etkinliklerine yanıt vermek için bir etkinlik işleyici oluşturduk. Bu işleyici, yakınlaştırma düzeyini gösteren bir bilgi penceresi açar.

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
Örneği görüntüleyin

Örneği Deneyin

DOM Etkinliklerini Dinleme

Maps JavaScript API etkinlik modeli kendi özel etkinliklerini oluşturur ve yönetir. Ancak tarayıcıdaki DOM (Belge Nesne Modeli), kullanılan tarayıcı etkinlik modeline göre kendi etkinliklerini de oluşturup dağıtır. Bu etkinlikleri yakalayıp yanıtlamak istiyorsanız Maps JavaScript API, DOM etkinliklerini dinlemek ve bağlamak için addDomListener() statik yöntemini sağlar.

Bu kolaylık yönteminin imzası aşağıda gösterilmiştir:

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

Burada instance, tarayıcı tarafından desteklenen herhangi bir DOM öğesi olabilir. Örneğin:

  • DOM'un hiyerarşik üyeleri (ör. window veya document.body.myform)
  • document.getElementById("foo") gibi adlandırılmış öğeler

addDomListener() işlevinin, belirtilen etkinliği tarayıcıya ilettiğini ve tarayıcının bu etkinliği tarayıcı DOM etkinlik modeline göre işlediğini unutmayın. Bununla birlikte, neredeyse tüm modern tarayıcılar en azından DOM 2 düzeyini destekler. (DOM düzeyindeki etkinlikler hakkında daha fazla bilgi için Mozilla DOM Düzeyleri referansına bakın.)

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
Örneği görüntüleyin

Örneği Deneyin

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

Etkinlik işleyicileri kaldırma

Belirli bir etkinlik işleyiciyi kaldırmak için bir değişkene atanmış olması gerekir. Ardından, dinleyicinin atandığı değişken adını ileterek removeListener() işlevini çağırabilirsiniz.

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

google.maps.event.removeListener(listener1);

Belirli bir örnekteki tüm dinleyicileri kaldırmak için örnek adını ileterek clearInstanceListeners() işlevini çağırın.

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 örnek için belirli bir etkinlik türünün tüm dinleyicilerini kaldırmak isterseniz örnek adını ve etkinlik adını göndererek clearListeners() işlevini çağırın.

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ı ile ilgili referans dokümanlarına bakın.

Kimlik doğrulama hatalarını dinleme

Kimlik doğrulama hatasını programatik olarak algılamak istiyorsanız (ör. bir işaretçiyi otomatik olarak göndermek için) geri çağırma işlevi hazırlayabilirsiniz. Aşağıdaki genel işlev tanımlanırsa kimlik doğrulama başarısız olduğunda çağrılır. function gm_authFailure() { /* Code */ };