איך אפשר לגרור סמנים

כשהאפשרות לגרור סמנים מופעלת, המשתמשים יכולים לגרור סמנים במפה באמצעות העכבר או מקשי החיצים. כדי להפוך סמן לניתן לגרירה, מגדירים את המאפיין AdvancedMarkerElement.gmpDraggable לערך true.

במפה לדוגמה הבאה מוצג סמן שניתן לגרירה, שמציג את המיקום המעודכן שלו בסיום הגרירה (האירוע gmp-dragend מופעל):

כדי לגרור סמן באמצעות המקלדת:

  1. לוחצים על מקש ה-Tab עד שהמיקוד מגיע לסמנים.
  2. משתמשים במקשי החיצים כדי לעבור לסמן הרצוי.
  3. כדי להפעיל את הגרירה, לוחצים על Option + מקש רווח או על Option + Enter (ב-Mac), או על Alt + מקש רווח או על Alt + Enter (ב-Windows).
  4. משתמשים במקשי החיצים כדי להזיז את הסמן.
  5. כדי להציב את הסמן במיקום החדש, לוחצים על מקש הרווח או על Enter. הפעולה הזו גם תשבית את הגרירה.
  6. כדי להשבית את הגרירה ולהחזיר את הסמן למיקום הקודם, לוחצים על Esc.

הצגת הקוד

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.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position as google.maps.LatLngAltitude;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        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.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

הגדרת טקסט תיאורי

כדי להגדיר טקסט תיאורי לסמן, שקוראי מסך יכולים לקרוא, משתמשים במאפיין AdvancedMarkerElement.title, כמו שמוצג כאן:

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

כשהמאפיין title מוגדר, הטקסט גלוי לקוראי מסך ומופיע כשהעכבר מרחף מעל הסמן.