Etkinlikler

Platform seçin: Android iOS JavaScript

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

Kullanıcı Arayüzü Etkinlikleri

Tarayıcı içindeki JavaScript olay odaklıdır. Yani JavaScript, etkileşimlere etkinlikler oluşturarak yanıt verir ve bir programın ilgi çekici etkinlikleri dinlemesini bekler. İki tür etkinlik vardır:

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

Her Maps JavaScript API nesnesi, bir dizi adlandırılmış etkinliği dışa aktarır. Belirli etkinliklerle ilgilenen programlar, bu etkinlikler için JavaScript etkinlik işleyicileri kaydeder ve bu etkinlikler alındığında nesnedeki etkinlik işleyicilerini kaydetmek için addListener() çağrısı yapılarak kod yürütür.

Aşağıdaki örnekte, siz haritayla etkileşimde bulunurken google.maps.Map tarafından hangi etkinliklerin tetiklendiği gösterilmektedir.

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

Kullanıcı Arayüzü Etkinlikleri

Maps JavaScript API'deki 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 etkinlikleri gibi görünebilir ancak aslında Maps JavaScript API'nin bir parçasıdır. Farklı tarayıcılar farklı DOM etkinlik modelleri uyguladığından, Maps JavaScript API, tarayıcılar arası çeşitli özellikleri işlemek zorunda kalmadan DOM etkinliklerini dinlemek ve yanıtlamak için bu mekanizmaları sağlar. Bu etkinlikler de genellikle etkinlik içinde bazı kullanıcı arayüzü durumlarını (fare konumu gibi) belirten bağımsız değişkenler 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ğini belirten bir etkinlik tetikler. Örneğin, haritanın yakınlaştırma düzeyi değiştiğinde API, haritada bir zoom_changed etkinliği tetikler. Nesnedeki etkinlik işleyicilerini de kaydetmek için addListener() yöntemini çağırarak bu durum değişikliklerine müdahale edebilirsiniz.

Kullanıcı etkinlikleri ve MVC durumu değişiklikleri birbirine benzese de bunları genellikle kodunuzda farklı şekilde ele almak istersiniz. Örneğin, MVC etkinlikleri kendi etkinlikleri içinde bağımsız değişkenler geçirmez. Bir MVC durum değişikliğinde değişen özelliği, söz konusu nesnede uygun getProperty yöntemini çağırarak incelemek isteyebilirsiniz.

Etkinlikleri Yönetme

Etkinlik bildirimlerine kaydolmak için addListener() etkinlik işleyicisini kullanın. Bu yöntem, dinlemesi için bir etkinlik ve belirtilen etkinlik gerçekleştiğinde çağıracak 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 işaretçiye bir etkinlik işleyici ekleriz. Ayrıca, center özelliğinde yapılan değişiklikler için haritaya bir etkinlik işleyici ekleriz ve center_changed etkinliğini aldıktan sonra 3 saniye sonra haritayı işaretçiye geri kaydırırız:

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

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

Örneği Deneyin

İpucu: Görüntü alanında bir değişiklik algılamaya çalışıyorsanız bileşen zoom_changed ve center_changed etkinlikleri yerine belirli bounds_changed etkinliğini kullandığınızdan emin olun. Maps JavaScript API bu sonraki etkinlikleri bağımsız olarak tetiklediğinden, görüntü alanı yetkili bir şekilde değiştirilene kadar getBounds() yararlı sonuçlar raporlamayabilir. Böyle bir etkinlikten sonra getBounds() yapmak isterseniz bunun yerine bounds_changed etkinliğini dinlemeyi unutmayın.

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

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

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

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

Maps JavaScript API'deki kullanıcı arayüzü etkinlikleri genellikle bir etkinlik bağımsız değişkeni iletir. Etkinlik işleyici, etkinliğin gerçekleştiği anda gerçekleşen kullanıcı arayüzü durumuna dikkat ederek bu bağımsız değişkene erişebilir. Örneğin, bir kullanıcı arayüzü 'click' etkinliği genellikle haritada tıklanan konumu belirten latLng özelliğini 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.

Etkinliğin bir etkinlik işleyici içindeki bağımsız değişkenlerine, bir nesnenin özelliklerine eriştiğiniz gibi erişebilirsiniz. Aşağıdaki örnekte harita için bir etkinlik işleyici eklenir ve kullanıcı tıklanan konumdaki haritayı tıkladığında bir işaretçi oluşturulur.

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

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

Örneği Deneyin

Etkinlik İşleyicilerde Kapatmaları Kullanma

Bir etkinlik işleyiciyi yürütürken, bir nesneye hem gizli hem de kalıcı verilerin ekli olması genellikle avantajlıdır. JavaScript, "gizli" örnek verilerini desteklemez ancak iç işlevlerin dış değişkenlere erişmesini sağlayan kapatmaları destekler. Kapatma işlemleri, normalde etkinliklerin gerçekleştiği nesnelere bağlı olmayan değişkenlere erişmek için etkinlik işleyiciler içinde kullanışlıdır.

Aşağıdaki örnekte, bir grup işaretçiye gizli mesaj atamak için etkinlik işleyicide bir işlev kapatma işlevi kullanılmıştır. İşaretçiyi tıkladığınızda, gizli mesajın bir bölümü gösterilir. Bu kısım, işaretçinin kendisinde yer almaz.

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

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

Örneği Deneyin

Olay İşleyiciler'de Özellikleri Alma ve Ayarlama

Haritalar JavaScript API'si etkinlik sistemindeki MVC durum değişikliği etkinliklerinin hiçbiri, etkinlik tetiklendiğinde bağımsız değişken iletmez. (Kullanıcı etkinlikleri, incelenebilecek bağımsız değişkenler iletir.) Bir MVC durum değişikliğinde özelliği incelemeniz gerekirse söz konusu nesnede uygun getProperty() yöntemini açıkça çağırmanız gerekir. Bu inceleme her zaman MVC nesnesinin mevcut durumunu alır. Bu, etkinliğin ilk tetiklendiği durum olmayabilir.

Not: Söz konusu mülkün durum değişikliğine yanıt veren bir etkinlik işleyici içinde açıkça bir özellik ayarlamak, öngörülemeyen ve/veya istenmeyen davranışlara yol açabilir. Örneğin, böyle bir özelliğin ayarlanması yeni bir etkinliği tetikler ve her zaman bu etkinlik işleyici içinde bir özellik ayarlarsanız sonuçta bir sonsuz döngü oluşturabilirsiniz.

Aşağıdaki örnekte, yakınlaştırma etkinliklerine yanıt verecek bir etkinlik işleyici oluştururuz. Bunun için söz konusu düzeyi gösteren bir bilgi penceresi açılır.

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

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

Örneği Deneyin

DOM Etkinliklerini Dinle

Maps JavaScript API etkinlik modeli, kendi özel etkinliklerini oluşturur ve yönetir. Bununla birlikte, tarayıcı içindeki DOM (Belge Nesne Modeli) de, kullanılmakta olan tarayıcı etkinlik modeline göre kendi etkinliklerini oluşturur ve gönderir. Bu etkinlikleri yakalamak ve yanıtlamak isterseniz Maps JavaScript API, DOM etkinliklerini dinlemek ve bağlamak için addDomListener() statik yöntemini sağlar.

Bu kolay kullanım yöntemi, aşağıda gösterildiği gibi bir imzaya sahiptir:

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

Bu durumda instance, aşağıdakiler de dahil olmak üzere tarayıcının desteklediği herhangi bir DOM öğesi olabilir:

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

addDomListener() ürününün, belirtilen etkinliği tarayıcıya ilettiğini unutmayın. Tarayıcı, etkinliği tarayıcının DOM etkinlik modeline göre işler. Bununla birlikte, neredeyse tüm modern tarayıcılar en azından DOM Düzey 2'yi 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();

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

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>

    <!-- 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>
Ö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, API'nin normal alanının dışındaki nesnelerle iletişim kurmasına olanak tanır.

Etkinlik İşleyicileri Kaldır

Belirli bir etkinlik işleyiciyi kaldırabilmeniz için bir değişkene atanmış olması gerekir. Daha sonra, işleyicinin atandığı değişken adını ileterek removeListener() yöntemini çağırabilirsiniz.

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

google.maps.event.removeListener(listener1);

Belirli bir örnekteki tüm işleyicileri kaldırmak için örnek adını ileterek clearInstanceListeners() yöntemini ç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ündeki tüm işleyicileri kaldırmak isterseniz örnek adını ve etkinlik adını ileterek clearListeners() yöntemini ç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 belgelerine bakın.

Kimlik doğrulama hatalarını dinleme

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