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:
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 Deneyin
İ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.
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 Deneyin
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.
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 Deneyin
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.
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 Deneyin
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
veyadocument.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.)
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> <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 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 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 */ };