İşaretçileri sürüklenebilir yap

Sürüklenebilirlik etkinleştirildiğinde kullanıcılar fareyi kullanarak işaretçileri haritada sürükleyebilir veya ok tuşlarını kullanın. Bir işaretçiyi sürüklenebilir hale getirmek için AdvancedMarkerElement.gmpDraggable özelliğini ayarlayın özelliğini true olarak ayarlayın.

Aşağıdaki örnek haritada, güncellenmiş halini gösteren sürüklenebilir bir işaretçi gösterilmektedir duracak şekilde konumlandırın (dragend etkinliği tetiklenir):

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

  1. İşaretçiler odaklanılana 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 tuşlarına basın 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 sürüklemeyi de kapatır.
  6. Sürüklemeyi kapatmak ve işaretçiyi önceki konumuna döndürmek için şuna basın: 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();
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 ayarlayın

Bir işaretçi için ekran okuyucuların okuyabileceği açıklayıcı metin ayarlamak üzere aşağıda gösterildiği gibi AdvancedMarkerElement.title özelliği:

    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 imleçle üzerine gelindiğinde görünür.