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

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

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

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

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

הצגת הקוד

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

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

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

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

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