Gdy włączona jest przeciąganie, użytkownicy mogą przeciągać znaczniki na mapie za pomocą myszy
lub klawiszy strzałek. Aby znacznik można było przeciągać, ustaw AdvancedMarkerElement.gmpDraggable
usłudze na true
.
Poniższa przykładowa mapa przedstawia znacznik, który można przeciągnąć, który wyświetla jego aktualizację
położenie po zakończeniu przeciągania (wywołane jest zdarzenie dragend
):
Aby przeciągnąć znacznik za pomocą klawiatury:
- Naciskaj klawisz Tab, aż znaczniki zostaną zaznaczone.
- Użyj klawisza strzałki, aby przejść do wybranego znacznika.
- Aby aktywować przeciąganie, naciśnij Option + Spacja lub Option + Enter (Mac) lub Alt + Spacja lub Alt + Enter (Windows).
- Użyj klawiszy strzałek, aby przenieść znacznik.
- Aby upuścić znacznik w nowym miejscu, naciśnij spację lub Enter. Ten spowoduje też wyłączenie przeciągania.
- Aby wyłączyć przeciąganie i przywrócić znacznik do poprzedniej pozycji, naciśnij Esc –
Zobacz kod
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();
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();
Ustaw tekst opisu
Aby ustawić opisowy tekst dla znacznika, który może być odczytywany przez czytniki ekranu, użyj funkcji
atrybut AdvancedMarkerElement.title
, jak tutaj:
const markerView = new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
title: "Some descriptive text.",
});
Gdy atrybut title
jest skonfigurowany, tekst jest widoczny dla czytników ekranu,
pojawia się po najechaniu kursorem myszy na znacznik.