Làm cho điểm đánh dấu có thể nhấp và truy cập được

Khi có thể nhấp hoặc kéo được, một điểm đánh dấu có thể phản hồi hoạt động nhập bằng bàn phím và chuột. Bạn có thể dùng chuột hoặc bàn phím để di chuyển giữa các điểm đánh dấu và di chuyển điểm đánh dấu nếu có thể kéo được. Trình đọc màn hình có thể đọc được văn bản được chỉ định trong tuỳ chọn title.

• Để tạo một điểm đánh dấu có thể nhấp vào, hãy đặt thuộc tính AdvancedMarkerElement.gmpClickable thành true và thêm một trình xử lý sự kiện nhấp chuột.
• Để kéo được điểm đánh dấu, hãy đặt thuộc tính AdvancedMarkerElement.gmpDraggable thành true.
• Để đặt văn bản mô tả cho một điểm đánh dấu, hãy sử dụng tuỳ chọn AdvancedMarkerElement.title.

Tạo điểm đánh dấu có thể nhấp vào

Ví dụ sau đây cho thấy một bản đồ có năm điểm đánh dấu có thể nhấp vào và làm tâm điểm:

Cách thao tác với điểm đánh dấu bằng bàn phím:

1. Sử dụng phím thẻ để lấy tiêu điểm vào điểm đánh dấu đầu tiên; nếu có nhiều điểm đánh dấu trên cùng một bản đồ, hãy sử dụng các phím mũi tên để chuyển qua các điểm đánh dấu.
2. Nếu điểm đánh dấu có thể nhấp được, hãy nhấn phím enter để "nhấp". Nếu điểm đánh dấu có cửa sổ thông tin, bạn có thể mở cửa sổ đó bằng cách nhấp hoặc nhấn phím Enter hoặc phím cách. Khi cửa sổ thông tin đóng, tiêu điểm sẽ trở về điểm đánh dấu liên kết.
3. Nhấn phím tab một lần nữa để tiếp tục di chuyển qua các chế độ điều khiển còn lại trên bản đồ.

Xem mã

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // Set LatLng and title text for the markers. The first marker (Boynton Pass)
    // receives the initial focus when tab is pressed. Use arrow keys to
    // move between markers; press tab again to cycle through the map controls.
    const tourStops = [
        {
            position: { lat: 34.8791806, lng: -111.8265049 }, 
            title: "Boynton Pass"
        },
        {
            position: { lat: 34.8559195, lng: -111.7988186 }, 
            title: "Airport Mesa"
        },
        {
            position: { lat: 34.832149, lng: -111.7695277 }, 
            title: "Chapel of the Holy Cross"
        },
        {
            position: { lat: 34.823736, lng: -111.8001857 }, 
            title: "Red Rock Crossing"
        },
        {
            position: { lat: 34.800326, lng: -111.7665047 }, 
            title: "Bell Rock"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
        });

        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    {
      position: { lat: 34.8791806, lng: -111.8265049 },
      title: "Boynton Pass",
    },
    {
      position: { lat: 34.8559195, lng: -111.7988186 },
      title: "Airport Mesa",
    },
    {
      position: { lat: 34.832149, lng: -111.7695277 },
      title: "Chapel of the Holy Cross",
    },
    {
      position: { lat: 34.823736, lng: -111.8001857 },
      title: "Red Rock Crossing",
    },
    {
      position: { lat: 34.800326, lng: -111.7665047 },
      title: "Bell Rock",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

initMap();
index.js

Để làm cho một điểm đánh dấu không thể nhấp lại, hãy xoá trình nghe sự kiện nhấp:

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

Tạo điểm đánh dấu có thể kéo

Khi bật tính năng kéo, 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. Để kéo được điểm đánh dấu, hãy đặt thuộc tính AdvancedMarkerElement.gmpDraggable thành true.

Bản đồ mẫu sau đây cho thấy một điểm đánh dấu có thể kéo được, hiển thị vị trí cập nhật của điểm đánh dấu đó khi thao tác kéo kết thúc (sự kiện dragend được kích hoạt):

Cách kéo một điểm đánh dấu bằng bàn phím:

1. Nhấn phím tab cho đến khi điểm đánh dấu được lấy làm tiêu điểm.
2. Sử dụng phím mũi tên để di chuyển đến điểm đánh dấu mong muốn.
3. Để kích hoạt tính năng 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).
4. Sử dụng các phím mũi tên để di chuyển điểm đánh dấu.
5. Để thả điểm đánh dấu tại vị trí mới, hãy nhấn Phím cách hoặc Enter. Thao tác này cũng sẽ tắt tính năng kéo.
6. Để tắt tính năng kéo và đưa điểm đánh dấu về vị trí trước đó, hãy nhấn phím Esc.

Xem mã

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

Đặ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 di chuột qua điểm đánh dấu.

Đặt tỷ lệ điểm đánh dấu

Việc tăng kích thước của điểm đánh dấu làm giảm độ chính xác cần thiết để tương tác với điểm đánh dấu trên mọi thiết bị (đặc biệt là các thiết bị màn hình cảm ứng) và cải thiện khả năng hỗ trợ tiếp cận. Các điểm đánh dấu mặc định đáp ứng tiêu chuẩn kích thước tối thiểu của WCAG AA. Tuy nhiên, đối với các nhà phát triển muốn tuân thủ tiêu chuẩn kích thước mục tiêu WCAG AAA, bạn nên tăng kích thước điểm đánh dấu. Hãy xem phần tuỳ chỉnh điểm đánh dấu cơ bản để tìm hiểu cách sử dụng PinElement và thay đổi tỷ lệ của điểm đánh dấu để tăng kích thước của điểm đánh dấu.

Dưới đây là ví dụ về cách tạo một điểm đánh dấu lớn hơn bằng cách sử dụng PinElement tăng kích thước:

    const pinScaled = new PinElement({
        scale: 2,
    });
    const markerScaled = new AdvancedMarkerElement({
        map,
        position: { lat: 37.419, lng: -122.02 },
        content: pinScaled.element,
    });