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ıdır. Yani JavaScript, etkinlikler oluşturarak etkileşimlere yanıt verir ve bir programın ilginç etkinlikleri dinlemesini bekler. İki tür etkinlik vardır:

• Kullanıcı etkinlikleri ("tıklama" fare etkinlikleri gibi), DOM'dan Maps JavaScript API'ye yayılır. 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 bir property_changed kuralı kullanılarak adlandırılır.

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

Aşağıdaki örnek, siz haritayla etkileşimde bulunurken google.maps.Map tarafından hangi etkinliklerin tetiklendiğini gösterir.

Etkinliklerin tam listesi için Maps JavaScript API Referansı'na bakın. Etkinlikler, etkinlikleri içeren her bir 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 nesnesinin dinleyebileceği kullanıcı etkinliklerinden bazıları şunlardır:

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

Tam liste için İşaretçi sınıfına bakın. Bu etkinlikler standart DOM etkinlikleri gibi görünebilir ancak aslında Maps JavaScript API'nin 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 bunlara yanıt vermek için bu mekanizmaları sağlar. Bu etkinlikler ayrıca normalde kullanıcı arayüzündeki bazı durum (ör. fare konumu) ile ilgili bağımsız değişkenleri etkinlikten geçirir.

MVC Durum Değişiklikleri

MVC nesneleri genellikle durum içerir. Bir nesnenin özelliği her değiştiğinde, Maps JavaScript API, özelliğin değiştiği bir etkinliği tetikler. Örneğin, API, haritanın yakınlaştırma düzeyi değiştiğinde bir haritada zoom_changed etkinliği tetikler. Nesnedeki etkinlik işleyicileri de kaydetmek için addListener() yöntemini çağırarak bu durum değişikliklerini yakalayabilirsiniz.

Kullanıcı etkinlikleri ve MVC durumu değişiklikleri benzer görünebilir ancak genellikle bunları kodunuzda farklı şekilde ele almak istersiniz. Örneğin MVC etkinlikleri, etkinliklerindeki bağımsız değişkenleri iletmez. Bir MVC durum değişikliğinde değişen özelliği, nesne üzerinde uygun getProperty yöntemini çağırarak incelemek istersiniz.

Etkinlikleri yönetme

Etkinlik bildirimlerine kaydolmak için addListener() etkinlik işleyiciyi kullanın. Bu yöntem, dinlenme için 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. İşaretçiye, tıklandığında etkinliği yakınlaştıran bir etkinlik işleyici ekleriz. Ayrıca, center özelliğinde yapılan değişiklikler için haritaya bir etkinlik işleyici ekler ve center_changed etkinliği alındıktan sonra haritayı 3 saniye sonra işaretçiye geri kaydırır:

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili rehberi okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği göster

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

İ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 sonraki bu etkinlikleri ayrı ayrı tetiklediğinden getBounds(), görüntü alanı yetkili olarak değiştirilene kadar faydalı sonuçları raporlamayabilir. Böyle bir etkinlikten sonra getBounds() dinlemek istiyorsanız bu etkinlik yerine bounds_changed etkinliğini dinlediğinizden emin olun.

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

Şekil düzenlendiğinde veya sürüklendiğinde işlem tamamlandığında etkinlik tetiklenir. Etkinliklerin listesini ve bazı kod snippet'lerini Şekiller bölümünde bulabilirsiniz.

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

Kullanıcı arayüzü etkinliklerinde bağımsız değişkenlere erişme

Maps JavaScript API'deki kullanıcı arayüzü etkinlikleri genellikle etkinlik işleyicinin erişebileceği bir etkinlik bağımsız değişkenini iletir. Etkinlik gerçekleştiğinde kullanıcı arayüzü durumu da belirtilir. Örneğin, bir kullanıcı arayüzü 'click' etkinliği genellikle haritada tıklanan konumu belirten bir latLng özelliği içeren MouseEvent döndürür. Bu davranışın kullanıcı arayüzü etkinliklerine özel olduğunu unutmayın. MVC durum değişiklikleri, etkinliklerindeki bağımsız değişkenleri iletmez.

Bir etkinliğin özelliklerine erişirken olduğu gibi, etkinliğin bağımsız değişkenlerine bir etkinlik işleyici içinde erişebilirsiniz. Aşağıdaki örnek, harita için bir etkinlik işleyici ekler ve kullanıcı tıklanan konumda haritayı tıkladığında bir işaret oluşturur.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili rehberi okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği göster

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Etkinlik İşleyicilerde Kapatmaları Kullanma

Bir etkinlik işleyici yürütürken bir nesneye hem gizli hem de kalıcı verilerin eklenmesi genellikle avantajlıdır. JavaScript, "gizli" örnek verilerini desteklemez ancak dahili işlevlerin dış değişkenlere erişmesine olanak tanıyan kapalı durumları destekler. Kapatmalar, etkinlik dinleyicilerin içinde, normalde meydana gelen nesnelere eklenmemiş değişkenlere erişmek için yararlıdır.

Aşağıdaki örnekte, bir işaretçi grubuna gizli mesaj atamak için etkinlik işleyicide bir işlev kapatma işlemi kullanılmıştır. Her bir işaretçi tıklandığında, gizli mesajın bir bölümü açığa çıkarılır. Bu kısım, işaretçinin içinde bulunmaz.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili rehberi okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği göster

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Etkinlik İşleyicilerde Mülk Alma ve Ayarlama

Haritalar JavaScript API'si etkinlik sistemindeki MVC durum değişikliği etkinliklerinin hiçbiri, etkinlik tetiklendiğinde meydana gelen bağımsız değişkenleri iletmez. (Kullanıcı etkinlikleri, incelenebilen bağımsız değişkenler iletir.) Bir MVC durum değişikliğindeki bir mülkü incelemeniz gerekirse söz konusu nesne üzerinde uygun getProperty() yöntemini açıkça çağırmanız gerekir. Bu inceleme, her zaman MVC nesnesinin mevcut durumunu alır. Bu durum, etkinlik ilk tetiklendiğinde geçerli olmayabilir.

Not: Belirli bir mülkün durum değişikliğine yanıt veren bir etkinlik işleyicide açıkça ayarlanan bir özellik, tahmin edilemez ve/veya istenmeyen davranış oluşturabilir. Örneğin, bu tür bir özelliğin ayarlanması yeni bir etkinliği tetikler ve bu etkinlik işleyicide her zaman bir mülk ayarlarsanız sonsuz döngü oluşturabilirsiniz.

Aşağıdaki örnekte, yakınlaştırma düzeyinin belirlendiği bir bilgi penceresi açarak bir etkinlik işleyici oluşturduk.

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili rehberi okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği göster

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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 belirli tarayıcı etkinlik modeline göre kendi etkinliklerini de oluşturup gönderir. Bu etkinlikleri yakalamak ve yanıtlamak istiyorsanız Maps JavaScript API, DOM etkinliklerini dinleyip bağlamak için addDomListener() statik yöntemi sağlar.

Bu kolaylık yöntemi, aşağıda gösterildiği gibi bir imza içerir:

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

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

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

addDomListener() tarafından belirtilen etkinliğin tarayıcıya iletildiğini ve bu durumda tarayıcının DOM etkinlik modeline göre etkinliğin gerçekleştiğini unutmayın. Ancak neredeyse tüm modern tarayıcılar DOM Seviye 2'yi destekler. (DOM düzeyi etkinlikleri hakkında daha fazla bilgi için Mozilla DOM Düzeyleri referansına bakın.)

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;
index.ts

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili rehberi okuyun.

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;
index.js

Not: JavaScript, TypeScript snippet'inden derlenir.

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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Örneği göster

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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ılıyor

Belirli bir etkinlik işleyiciyi kaldırmak için değişkenin bir değişkene atanmış olması gerekir. Ardından, dinleyicinin 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 örnekten tüm dinleyicileri kaldırmak için clearInstanceListeners() adını kullanarak örnek adını iletin.

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 örneğin belirli bir etkinlik türündeki tüm dinleyicilerini kaldırmak için clearListeners() yöntemini çağırarak örnek adını ve etkinlik adını iletin.

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

Kimlik doğrulama hataları dinleniyor

Kimlik doğrulama hatasını (örneğin, otomatik olarak işaretçi göndermek için) programatik olarak algılamak istiyorsanız 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 */ };