İşaretçileri sürüklenebilir hale getirme

Sürükleyebilirlik etkinleştirildiğinde kullanıcılar fareyi veya ok tuşlarını kullanarak haritadaki işaretçileri 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 işlemi tamamlandığında güncellenmiş konumunu gösteren sürüklenebilir bir işaretçi gösterilmektedir (dragend etkinliği tetiklenir):

Bir işaretçiyi klavyeyle sürüklemek için:

  1. İşaretçilere odaklanana kadar sekme tuşuna basın.
  2. İstediğiniz işaretçiye gitmek için ok tuşunu kullanın.
  3. 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.
  4. İşaretçiyi taşımak için ok tuşlarını kullanın.
  5. İşaretçiyi yeni konumuna bırakmak için Boşluk veya Enter tuşuna basın. Bu işlem, sürüklemeyi de devre dışı bırakır.
  6. Sürüklemeyi devre dışı bırakmak ve işaretçiyi önceki konumuna döndürmek için Esc tuşuna basın.

Kodu görme

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

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

Açıklayıcı metin ayarlama

Bir işaretçi için ekran okuyucular tarafından okunabilen açıklayıcı metin ayarlamak istiyorsanız 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 fareyle işaretçinin üzerine geldiğinde görünür.