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

Sürükleme özelliği etkinleştirildiğinde kullanıcılar, fareyi veya ok tuşlarını kullanarak haritadaki işaretçileri sürükleyebilir. Bir işaretçinin sürüklenebilir olması için AdvancedMarkerElement.gmpDraggable özelliğini true olarak ayarlayın.

Aşağıdaki örnek haritada, sürükleme işlemi tamamlandığında (gmp-dragend etkinliği tetiklendiğinde) güncellenen konumunu gösteren sürüklenebilir bir işaretçi gösterilmektedir:

İş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 hareket ettirmek 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şlemle sürükleme de devre dışı bırakılır.
  6. Sürüklemeyi kapatmak ve işaretçiyi önceki konumuna döndürmek için Esc tuşuna basın.

Kodu görüntüleme

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addListener('dragend', () => {
        const position = draggableMarker.position!;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addListener('dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

Açıklayıcı metin ayarlama

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