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

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

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

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

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