کشیدنی کردن نشانگرها

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

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

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

  1. کلید جهش را فشار دهید تا نشانگرها کانونی شوند.
  2. از کلید جهت‌نما برای رفتن به نشانگر موردنظر استفاده کنید.
  3. برای فعال کردن کشیدن، گزینه + فاصله یا گزینه + Enter (Mac)، دگرساز + فاصله یا دگرساز + 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 ویژگی تنظیم می‌شود، نوشتار برای صفحه‌خوان‌ها قابل‌مشاهده است و وقتی موشواره روی نشانگر نگه داشته می‌شود، نشان داده خواهد شد.