Etkinlikler

Bu sayfada, programlama yoluyla dinleyebileceğiniz ve 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, etkileşimlere etkinlik oluşturarak yanıt verir ve bir programın ilginç etkinlikleri dinlemesini bekler. İki tür etkinlik vardır:

• Kullanıcı etkinlikleri (ör. "tıklama" faresi etkinlikleri), DOM'den Maps JavaScript API'ye aktarı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 property_changed kuralıyla 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, bu etkinlikler için JavaScript etkinlik işleyicilerini kaydeder ve nesnede etkinlik işleyicileri kaydetmek için addListener() yöntemini çağırarak kodu yürütür.

Aşağıdaki örnekte, siz haritayla etkileşim kurarken google.maps.Map tarafından tetiklenen etkinlikler gösterilmektedir.

Etkinliklerin tam listesi için Haritalar JavaScript API Referansı'na bakın. 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, fare veya klavye etkinlikleri gibi kullanıcı etkinliklerine yanıt vermek üzere 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ünse de aslında Maps JavaScript API'nin bir parçasıdır. Farklı tarayıcılar farklı DOM etkinlik modelleri uyguladığından, Maps JavaScript API bu mekanizmaları tarayıcılar arası çeşitli özellikleri işlemeye gerek kalmadan DOM etkinliklerini dinlemek ve yanıtlamak için sağlar. Bu etkinlikler genellikle etkinlik içinde, bazı kullanıcı arayüzü durumuna (fare konumu gibi) dikkat çeken 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, mülkün değiştiği bir etkinliği tetikler. Örneğin, haritanın yakınlaştırma seviyesi değiştiğinde API, harita üzerinde bir zoom_changed etkinliği tetikler. Nesnede etkinlik işleyicileri 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 benzer görünebilir ancak genellikle bunları kodunuzda farklı şekilde ele almak istersiniz. Örneğin, MVC etkinlikleri, kendi etkinlikleri içinde bağımsız değişkenleri iletmez. MVC durumu değişikliğinde değiştirilen özelliği, söz konusu nesnede uygun getProperty yöntemini çağırarak inceleyebilirsiniz.

Etkinlikleri Yönetme

Etkinlik bildirimlerine kaydolmak için addListener() etkinlik işleyiciyi kullanın. Bu yöntemde dinlemek için bir etkinlik ve belirtilen etkinlik gerçekleştiğinde bir işlev çağırır.

Örnek: Harita ve İşaretçi Etkinlikleri

Aşağıdaki kod, kullanıcı etkinliklerini durum değişikliği etkinlikleriyle bir araya getirir. Tıklandığında haritayı yakınlaştıran bir işaretçiye 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ğini aldıktan 3 saniye sonra haritayı tekrar işaretçiye kaydırırız:

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

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

İpucu: Görüntü alanında bir değişiklik tespit etmeye çalışıyorsanız bileşen zoom_changed ve center_changed etkinlikleri yerine ilgili bounds_changed etkinliğini kullandığınızdan emin olun. Maps JavaScript API bu diğer etkinlikleri bağımsız olarak tetiklediğinden getBounds(), görüntü alanı yetkili olarak değiştirilene kadar faydalı sonuçlar rapor etmeyebilir. 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 ve bazı kod snippet'lerinin listesi için Şekiller bölümüne bakın.

Örneği inceleyin (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şkeni iletir. Bu bağımsız değişkene, etkinliğin gerçekleştiği andaki kullanıcı arayüzü durumuna dikkat ederek, etkinlik işleyici tarafından erişilebilir. Ö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 özel olduğunu unutmayın. MVC durumu değişiklikleri, etkinliklerinde bağımsız değişkenleri iletmez.

Etkinlik işleyici içindeki etkinliğin bağımsız değişkenlerine, nesnenin özelliklerine eriştiği 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.

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

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

Etkinlik İşleyicilerde Kapatmaları Kullanma

Bir etkinlik işleyiciyi yürütürken, hem gizli hem de kalıcı verilerin bir nesneye ekli olması genellikle avantajlıdır. JavaScript, "gizli" örnek verilerini desteklemez ancak iç işlevlerin dış değişkenlere erişmesine olanak tanıyan kapatmaları destekler. Kapanışlar, etkinlik işleyiciler içinde normalde etkinliklerin gerçekleştiği nesnelere bağlı olmayan değişkenlere erişme açısından yararlıdır.

Aşağıdaki örnekte, bir grup işaretçiye gizli bir mesaj atamak için etkinlik işleyicide bir işlev kapatması kullanılmaktadır. Her bir işaretçiyi tıkladığınızda, gizli mesajın işaretçisinde bulunmayan bir kısmı açılır.

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

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

Etkinlik İşleyicilerinde Mülk 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şkenleri iletmez. (Kullanıcı etkinlikleri, incelenebilen bağımsız değişkenler iletir.) MVC durumu 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 inceleme her zaman MVC nesnesinin mevcut durumunu alır. Bu durum, etkinliğin ilk tetiklendiği durum olmayabilir.

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

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

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

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

DOM Etkinliklerini dinleme

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

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

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

Burada instance, aşağıdakiler dahil olmak üzere tarayıcı tarafından desteklenen herhangi bir DOM öğesi olabilir:

• DOM'nin window veya document.body.myform gibi hiyerarşik üyeleri
• 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ının DOM etkinlik modeline göre işlediğini unutmayın. Ancak neredeyse tüm modern tarayıcılar en azından DOM Düzeyi 2'yi destekler. (DOM düzeyindeki etkinlikler hakkında daha fazla bilgi için Mozilla DOM Düzeyleri referansına bakın.)

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

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>
  <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

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 adının dışındaki nesnelerle iletişim kurmasına olanak tanır.

Etkinlik İşleyicileri Kaldır

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

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

google.maps.event.removeListener(listener1);

Belirli bir örnekten tüm işleyicileri kaldırmak için örnek adını ileterek clearInstanceListeners() çağrısı yapı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 örnekte belirli bir etkinlik türünün tüm işleyicilerini kaldırmak için örnek adını ve etkinlik adını ileterek clearListeners() çağrısı yapı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 belgeleri inceleyin.

Kimlik doğrulama hatalarını dinle

Bir kimlik doğrulama hatasını programatik olarak tespit etmek istiyorsanız (örneğin, otomatik olarak bir işaretçi 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 */ };