نشانگرها را قابل کشیدن کنید

وقتی قابلیت کشیدن فعال است، کاربران می توانند با استفاده از ماوس یا کلیدهای جهت دار، نشانگرها را روی نقشه بکشند. برای اینکه یک نشانگر قابل کشیدن باشد، ویژگی AdvancedMarkerElement.gmpDraggable را روی true تنظیم کنید.

نقشه مثال زیر یک نشانگر قابل کشیدن را نشان می دهد که موقعیت به روز شده خود را پس از پایان کشیدن نشان می دهد (رویداد dragend فعال می شود):

برای کشیدن نشانگر با صفحه کلید:

1. کلید تب را فشار دهید تا نشانگرها فوکوس شوند.
2. برای حرکت به نشانگر مورد نظر از کلید جهت دار استفاده کنید.
3. برای فعال کردن کشیدن، Option + Space یا Option + Enter (Mac)، Alt + Space یا Alt + Enter (ویندوز) را فشار دهید.
4. برای حرکت دادن نشانگر از کلیدهای جهت دار استفاده کنید.
5. برای رها کردن نشانگر در مکان جدید، Space یا 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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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 تنظیم می شود، متن برای صفحه خوان ها قابل مشاهده است و زمانی که ماوس روی نشانگر قرار می گیرد ظاهر می شود.

،

وقتی قابلیت کشیدن فعال است، کاربران می توانند با استفاده از ماوس یا کلیدهای جهت دار، نشانگرها را روی نقشه بکشند. برای اینکه یک نشانگر قابل کشیدن باشد، ویژگی AdvancedMarkerElement.gmpDraggable را روی true تنظیم کنید.

نقشه مثال زیر یک نشانگر قابل کشیدن را نشان می دهد که موقعیت به روز شده خود را پس از پایان کشیدن نشان می دهد (رویداد dragend فعال می شود):

برای کشیدن نشانگر با صفحه کلید:

1. کلید تب را فشار دهید تا نشانگرها فوکوس شوند.
2. برای حرکت به نشانگر مورد نظر از کلید جهت دار استفاده کنید.
3. برای فعال کردن کشیدن، Option + Space یا Option + Enter (Mac)، Alt + Space یا Alt + Enter (ویندوز) را فشار دهید.
4. برای حرکت دادن نشانگر از کلیدهای جهت دار استفاده کنید.
5. برای رها کردن نشانگر در مکان جدید، Space یا 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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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 تنظیم می شود، متن برای صفحه خوان ها قابل مشاهده است و زمانی که ماوس روی نشانگر قرار می گیرد ظاهر می شود.