使标记可拖动

将标记设为可拖动后，用户可以使用鼠标或箭头键来拖动地图上的标记。如要使标记可拖动，请将 AdvancedMarkerElement.gmpDraggable 属性设置为 true。

下例中的地图就展示了一个可拖动的标记，该标记会在拖动完成（触发 dragend 事件）后显示其新位置：

要使用键盘拖动标记，请按以下说明操作：

  1. 按 Tab 键，直至标记获得焦点。
  2. 使用箭头键可移动到所需的标记。
  3. 如要激活拖动功能，请按 Option 键 + 空格键或 Option 键 + Enter 键 (Mac)，或者按 Alt 键 + 空格键或 Alt 键 + Enter 键 (Windows)。
  4. 使用箭头键可移动标记。
  5. 要将标记放在新位置，请按空格键或 Enter 键。执行此操作也会同时关闭拖动功能。
  6. 如要关闭拖动功能，并将标记移回之前的位置，请按 Esc 键。

查看代码

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;  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 infoWindow = new InfoWindow();  const draggableMarker = new AdvancedMarkerElement({  position: {lat: 37.39094933041195, lng: -122.02503913145092},  gmpDraggable: true,  title: "This marker is draggable.",  });  mapElement.append(draggableMarker);  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

JavaScript

const mapElement = document.querySelector('gmp-map'); async function initMap() {  // Request needed libraries.  const { Map, InfoWindow } = await google.maps.importLibrary("maps");  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");  const infoWindow = new InfoWindow();  const draggableMarker = new AdvancedMarkerElement({  position: { lat: 37.39094933041195, lng: -122.02503913145092 },  gmpDraggable: true,  title: "This marker is draggable.",  });  mapElement.append(draggableMarker);  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 属性后，文本内容可由屏幕阅读器读取，并且将鼠标悬停在标记上时会显示文本。