Sürüklenebilirlik etkinleştirildiğinde kullanıcılar fare veya ok tuşlarını kullanarak işaretçileri harita üzerinde sürükleyebilir. Bir işaretçiyi sürüklenebilir hale getirmek için AdvancedMarkerElement.gmpDraggable
özelliğini true
olarak ayarlayın.
Aşağıdaki örnek haritada, sürükleme tamamlandığında güncellenmiş konumunu görüntüleyen sürüklenebilir bir işaretçi gösterilmektedir (dragend
etkinliği tetiklenir):
İşaretçiyi klavyeyle sürüklemek için:
- İşaretçiler odaklanılana kadar sekme tuşuna basın.
- İstediğiniz işaretçiye gitmek için ok tuşunu kullanın.
- Sürüklemeyi etkinleştirmek için Option + Boşluk veya Option + Enter (Mac), Alt + Boşluk veya Alt + Enter (Windows) tuşlarına basın.
- İşaretçiyi taşımak için ok tuşlarını kullanın.
- İşaretçiyi yeni konumuna bırakmak için Boşluk veya Enter tuşuna basın. Bu işlem, sürüklemeyi de kapatır.
- Sürüklemeyi kapatmak ve işaretçiyi önceki konumuna geri getirmek için Esc tuşuna basın.
Kodu göster
TypeScript
async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const map = new Map(document.getElementById('map') as HTMLElement, { center: {lat: 37.39094933041195, lng: -122.02503913145092}, zoom: 14, mapId: '4504f8b37365c3d0', }); const infoWindow = new InfoWindow(); const draggableMarker = new AdvancedMarkerElement({ map, position: {lat: 37.39094933041195, lng: -122.02503913145092}, gmpDraggable: true, title: "This marker is draggable.", }); draggableMarker.addListener('dragend', (event) => { const position = draggableMarker.position as google.maps.LatLng; infoWindow.close(); infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`); infoWindow.open(draggableMarker.map, draggableMarker); }); } initMap();
JavaScript
async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const map = new Map(document.getElementById("map"), { center: { lat: 37.39094933041195, lng: -122.02503913145092 }, zoom: 14, mapId: "4504f8b37365c3d0", }); const infoWindow = new InfoWindow(); const draggableMarker = new AdvancedMarkerElement({ map, position: { lat: 37.39094933041195, lng: -122.02503913145092 }, gmpDraggable: true, title: "This marker is draggable.", }); draggableMarker.addListener("dragend", (event) => { const position = draggableMarker.position; infoWindow.close(); infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`); infoWindow.open(draggableMarker.map, draggableMarker); }); } initMap();
Açıklayıcı metin ayarlayın
Bir işaretçi için ekran okuyucular tarafından okunabilecek açıklayıcı metin ayarlamak isterseniz burada gösterildiği gibi AdvancedMarkerElement.title
özelliğini kullanın:
const markerView = new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
title: "Some descriptive text.",
});
title
özelliği ayarlandığında, metin ekran okuyucular tarafından görülebilir ve fare imleci işaretçinin üzerine getirdiğinde görünür.