Khi tính năng kéo được bật, người dùng có thể kéo các điểm đánh dấu trên bản đồ bằng chuột
hoặc các phím mũi tên. Để làm cho điểm đánh dấu có thể kéo, đặt AdvancedMarkerElement.gmpDraggable
vào true
.
Bản đồ mẫu sau hiển thị một điểm đánh dấu có thể kéo và hiển thị điểm đánh dấu đã cập nhật
vị trí khi kéo kết thúc (sự kiện dragend
được kích hoạt):
Cách kéo điểm đánh dấu bằng bàn phím:
- Nhấn phím tab cho đến khi điểm đánh dấu được lấy tiêu điểm.
- Sử dụng phím mũi tên để di chuyển đến điểm đánh dấu mong muốn.
- Để kích hoạt thao tác kéo, hãy nhấn Option + Space hoặc Option + Enter (máy Mac), Alt + Dấu cách hoặc Alt + Enter (Windows).
- Sử dụng các phím mũi tên để di chuyển điểm đánh dấu.
- Để thả điểm đánh dấu tại vị trí mới, hãy nhấn Phím cách hoặc Enter. Chiến dịch này cũng sẽ tắt tính năng kéo.
- Để tắt tính năng kéo và đưa điểm đánh dấu về vị trí trước đó, nhấn Esc.
Xem mã
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();
Đặt văn bản mô tả
Để đặt văn bản mô tả cho một điểm đánh dấu mà trình đọc màn hình có thể đọc, hãy sử dụng
thuộc tính AdvancedMarkerElement.title
, như minh hoạ dưới đây:
const markerView = new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
title: "Some descriptive text.",
});
Khi bạn đặt thuộc tính title
, văn bản sẽ hiển thị với trình đọc màn hình và
sẽ xuất hiện khi chuột di chuột qua điểm đánh dấu.