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

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

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

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

  1. کلید Tab را فشار دهید تا نشانگرها در فوکوس قرار گیرند.
  2. با استفاده از کلید جهت‌نما، به نشانگر مورد نظر بروید.
  3. برای فعال کردن کشیدن و رها کردن، کلیدهای Option + Space یا Option + Enter (مک)، Alt + Space یا Alt + Enter (ویندوز) را فشار دهید.
  4. برای حرکت دادن نشانگر از کلیدهای جهت‌نما استفاده کنید.
  5. برای قرار دادن نشانگر در محل جدیدش، کلید Space یا Enter را فشار دهید. این کار همچنین کشیدن نشانگر را غیرفعال می‌کند.
  6. برای غیرفعال کردن کشیدن و بازگرداندن نشانگر به موقعیت قبلی خود، Esc را فشار دهید.

کد را ببینید

تایپ اسکریپت 

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

جاوا اسکریپت 

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