如果標記可點擊或拖曳,就能回應鍵盤和滑鼠的輸入動作。您可以使用滑鼠或鍵盤在標記之間移動,以及在標記可拖曳的情況下移動標記。螢幕閱讀器會顯示您在 title
選項中指定的文字。
- 如要將標記設計為可點擊,請加入點擊事件處理常式。
- 如要將標記設計為可拖曳,請將
AdvancedMarkerView.draggable
屬性設為true
。 - 如要設定標記的說明文字,請使用
AdvancedMarkerView.title
選項。
將標記設計為可點擊
下例為含有五個可點擊、可聚焦標記的地圖:
如要使用鍵盤瀏覽標記:
- 使用 Tab 鍵可將焦點移至第一個標記,如果一張地圖上有多個標記,使用方向鍵即可輪轉切換標記。
- 如果標記可點擊,按下 Enter 鍵即可執行「點擊」動作。如要開啟標記內含的資訊視窗,您可以點選標記,或是按下 Enter 鍵或空格鍵。資訊視窗關閉後,焦點就會回到相關標記。
- 再次按下 Tab 鍵,即可繼續在其他地圖控制項之間移動。
查看程式碼
TypeScript
function initMap() { const map = new google.maps.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 google.maps.InfoWindow(); // Create the markers. tourStops.forEach(({position, title}, i) => { const pinView = new google.maps.marker.PinView({ glyph: `${i + 1}`, }); const marker = new google.maps.marker.AdvancedMarkerView({ position, map, title: `${i + 1}. ${title}`, content: pinView.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); }); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.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 google.maps.InfoWindow(); // Create the markers. tourStops.forEach(({ position, title }, i) => { const pinView = new google.maps.marker.PinView({ glyph: `${i + 1}`, }); const marker = new google.maps.marker.AdvancedMarkerView({ position, map, title: `${i + 1}. ${title}`, content: pinView.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); }); }); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } [class$=api-load-alpha-banner] { display: none; }
HTML
<html> <head> <title>Advanced Marker Accessibility</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>
試用範例
如要將標記復原為不可點擊,請移除點擊事件監聽器:
// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});
// Removing the listener.
google.maps.event.removeListener(clickListener);
將標記設計為可拖曳
啟用拖曳功能後,使用者就能透過滑鼠或方向鍵在地圖上拖曳標記。如要將標記設計為可拖曳,請將 AdvancedMarkerView.draggable
屬性設為 true
。
下方地圖範例展示一個可拖曳標記,在拖曳完成時會顯示更新後的位置 (觸發 dragend
事件):
如要使用鍵盤拖曳標記:
- 持續點按 Tab 鍵,直到焦點移至標記。
- 使用方向鍵移至所需的標記。
- 如要啟用拖曳功能,在 Mac 上請按下 Option + 空格鍵或 Option + Enter 鍵,在 Windows 上請按下 Alt + 空格鍵或 Alt + Enter 鍵。
- 使用方向鍵即可移動標記。
- 如要將標記放在新位置,請按下空格鍵或 Enter 鍵,這樣也會停用拖曳功能。
- 如要停用拖曳功能並將標記移回先前的位置,請按下 Esc 鍵。
查看程式碼
TypeScript
function initMap() { const map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: {lat: 37.39094933041195, lng: -122.02503913145092}, zoom: 14, mapId: '4504f8b37365c3d0', }); const infoWindow = new google.maps.InfoWindow(); const draggableMarker = new google.maps.marker.AdvancedMarkerView({ map, position: {lat: 37.39094933041195, lng: -122.02503913145092}, draggable: 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); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.39094933041195, lng: -122.02503913145092 }, zoom: 14, mapId: "4504f8b37365c3d0", }); const infoWindow = new google.maps.InfoWindow(); const draggableMarker = new google.maps.marker.AdvancedMarkerView({ map, position: { lat: 37.39094933041195, lng: -122.02503913145092 }, draggable: 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); }); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } [class$=api-load-alpha-banner] { display: none; }
HTML
<html> <head> <title>Draggable Advanced Marker</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>
試用範例
設定說明文字
如要設定螢幕閱讀器可讀取的標記說明文字,請使用 AdvancedMarkerView.title
屬性,如下所示:
const markerView = new google.maps.marker.AdvancedMarkerView({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
title: "Some descriptive text.",
});
設定 title
屬性後,文字就能向螢幕閱讀器顯示,且會在滑鼠游標懸停於標記上時出現。