Etkinlikler

Platformu seçin: Android iOS JavaScript

Bu sayfada, programatik olarak 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 etkinliğe dayalıdır. Bu, JavaScript'in etkinlik oluşturarak etkileşimlere yanıt verdiği ve bir programın ilginç etkinlikleri dinlemesini beklediği anlamına gelir. İki tür etkinlik vardır:

  • Kullanıcı etkinlikleri (ör. "tıklama" fare etkinlikleri) 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 property_changed kuralı kullanılarak adlandırılır.

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

Aşağıdaki örnekte, haritayla 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

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, çeşitli tarayıcılar arası özellikleri işlemeye gerek kalmadan DOM etkinliklerini dinlemek ve bunlara yanıt vermek için bu mekanizmaları sağlar. Bu etkinlikler genellikle bazı kullanıcı arayüzü durumlarını (ör. fare konumu) belirten etkinlik içinde bağımsız değişkenler de iletir.

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ğine dair bir etkinlik tetikler. Örneğin, API, haritanın yakınlaştırma düzeyi değiştiğinde haritada zoom_changed etkinliğini tetikler. Nesnede etkinlik işleyicilerini kaydetmek için addListener() işlevini çağırarak bu durum değişikliklerini de engelleyebilirsiniz.

Kullanıcı etkinlikleri ve MVC durum değişiklikleri benzer görünebilir ancak kodunuzda bunları farklı şekilde ele almanız gerekir. Örneğin, MVC etkinlikleri kendi etkinliklerinde bağımsız değişkenleri iletmez. MVC durum değişikliğinde değişen özelliği, söz konusu nesnede uygun getProperty yöntemini çağırarak inceleyin.

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. Bu örnek, tıklandığında haritayı yakınlaştıran bir işaretçiye etkinlik işleyici ekler. Ayrıca, center özelliğindeki değişiklikler için haritaya bir etkinlik işleyici ekler ve center_changed etkinliği alındıktan 3 saniye sonra haritayı işaretçiye geri kaydırır.

TypeScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;

    // Retrieve the map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    // Get the inner map from the map element.
    const innerMap = mapElement.innerMap;

    const center = mapElement.center;

    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: 'Click to zoom',
        gmpClickable: true,
    });

    innerMap.addListener('center_changed', () => {
        // 3 seconds after the center of the map has changed,
        // pan back to the marker.
        window.setTimeout(() => {
            innerMap.panTo(marker.position as google.maps.LatLng);
        }, 3000);
    });

    // Zoom in when the marker is clicked.
    marker.addListener('gmp-click', () => {
        innerMap.setZoom(8);
        innerMap.setCenter(marker.position as google.maps.LatLng);
    });
}

initMap();
index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Retrieve the map element.
    const mapElement = document.querySelector('gmp-map');
    // Get the inner map from the map element.
    const innerMap = mapElement.innerMap;
    const center = mapElement.center;
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: 'Click to zoom',
        gmpClickable: true,
    });
    innerMap.addListener('center_changed', () => {
        // 3 seconds after the center of the map has changed,
        // pan back to the marker.
        window.setTimeout(() => {
            innerMap.panTo(marker.position);
        }, 3000);
    });
    // Zoom in when the marker is clicked.
    marker.addListener('gmp-click', () => {
        innerMap.setZoom(8);
        innerMap.setCenter(marker.position);
    });
}
initMap();
index.js
Örneği görüntüleyin

Örneği deneyin

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

Örnek: Şekil düzenleme ve sürükleme etkinlikleri

Bir şekil düzenlendiğinde veya sürüklendiğinde, işlem tamamlandıktan sonra bir etkinlik tetiklenir. Etkinliklerin ve bazı kod snippet'lerinin listesi için Şekiller başlıklı makaleyi inceleyin.

Ö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 bir etkinlik bağımsız değişkeni iletir. Bu bağımsız değişkene, etkinlik gerçekleştiğinde kullanıcı arayüzü durumunu belirten etkinlik işleyici tarafından erişilebilir. Örneğin, bir kullanıcı arayüzü 'click' etkinliği genellikle haritada tıklanan konumu belirten bir latLng özelliği içeren bir MouseEvent iletilir. Bu davranışın yalnızca kullanıcı arayüzü etkinliklerine özgü olduğunu unutmayın. MVC durum değişiklikleri, etkinliklerinde bağımsız değişkenleri iletmez.

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

TypeScript

async function initMap() {
  // Request needed libraries.
  await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  innerMap.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, innerMap);
  });
}

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.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    innerMap.addListener("click", (e) => {
        placeMarkerAndPanTo(e.latLng, innerMap);
    });
}
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şleyicilerinde kapatmalar kullanma

Bir etkinlik dinleyicisi yürütülürken genellikle bir nesneye hem özel hem de kalıcı verilerin eklenmesi avantajlıdır. JavaScript, "özel" örnek verilerini desteklemez ancak iç işlevlerin dış değişkenlere erişmesine olanak tanıyan kapanımları destekler. Kapanışlar, etkinlik dinleyicilerinde, normalde etkinliklerin gerçekleştiği nesnelere eklenmeyen değişkenlere erişmek için kullanışlıdır.

Aşağıdaki örnekte, bir etkinlik işleyicisinde işlev kapatması kullanılarak bir dizi işaretçiye gizli mesaj atanmaktadır. Her işaretçiyi tıkladığınızda, işaretçinin kendisinde bulunmayan gizli mesajın bir bölümü gösterilir.

TypeScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;
    const innerMap = mapElement.innerMap;

    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.
    innerMap.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: innerMap,
        });

        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('gmp-click', () => {
        infowindow.open(marker.map, marker);
    });
}

initMap();
index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    const bounds = {
        north: -25.363882,
        south: -31.203405,
        east: 131.044922,
        west: 125.244141,
    };
    // Display the area between the location southWest and northEast.
    innerMap.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: innerMap,
        });
        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('gmp-click', () => {
        infowindow.open(marker.map, marker);
    });
}
initMap();
index.js
Örneği görüntüleyin

Örneği deneyin

Etkinlik işleyicilerinde özellikleri 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, incelenebilecek bağımsız değişkenler iletir.) Bir özelliği MVC durum değişikliğinde incelemeniz gerekiyorsa bu 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: İlgili özelliğin durum değişikliğine yanıt veren bir etkinlik işleyicisi içinde bir özelliği açıkça ayarlamak, öngörülemeyen ve/veya istenmeyen davranışlara neden olabilir. Böyle bir özelliği ayarlamak, örneğin yeni bir etkinliği tetikler ve bu etkinlik işleyicisi içinde her zaman bir özellik ayarlarsanız sonsuz döngü oluşturabilirsiniz.

Aşağıdaki örnekte, bu düzeyi gösteren bir bilgi penceresi açarak yakınlaştırma etkinliklerine yanıt vermek için nasıl etkinlik işleyici ayarlanacağı gösterilmektedir.

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

Etkinlik işleyicileri kaldırma

Belirli bir etkinlik işleyiciyi kaldırmak için bu işleyicinin 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ündeki tüm dinleyicileri kaldırmak üzere clearListeners() işlevini çağırın ve örnek adıyla 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ıyla ilgili referans belgelerine bakın.

Kimlik doğrulama hatalarını dinleme

Kimlik doğrulama hatasını programatik olarak algılamak (örneğin, otomatik olarak bir işaretçi göndermek) 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 çağrılır. function gm_authFailure() { /* Code */ };

TypeScript'te, işlevi aşağıda gösterildiği gibi genel kapsamda eklemeniz gerekebilir:

// Define the callback function.
window.gm_authFailure = () => {
  console.error("Google Maps failed to authenticate.");
  /* Code */
};

// Add gm_authFailure to the global scope.
declare global {
  interface Window {
    gm_authFailure?: () => void;
  }
}
export {};