如何让AdvancedMarkerElement的拖拽行为更贴近传统Marker？

传统Marker拖拽体验 #

使用Marker时，拖拽标记会显示小巧的十字准星，营造精准定位的操作感，且十字准星会在拖拽结束后自动消失。

传统Marker代码示例 #

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { Marker } = await google.maps.importLibrary("marker");

  const myLatLng = {
    lat: -34.397,
    lng: 150.644
  };

  const map = new Map(document.getElementById("map"), {
    center: myLatLng,
    zoom: 8
  });
  
  const marker = new Marker({
    map,
    position: myLatLng,
    draggable: true
  });

  google.maps.event.addListener(marker, 'dragend', function() {
    const position = marker.getPosition();
    alert('dragend at ' + position);
  });
}

initMap();

传统Marker拖拽效果 #

新版AdvancedMarkerElement的问题 #

使用AdvancedMarkerElement时，拖拽标记不会显示十字准星，反而会出现一个冗余且外观粗糙的bounding box，更糟的是这个框在拖拽结束后会持续保留。核心需求是实现拖拽结束后移除标记的焦点，消除这个bounding box。

新版Marker代码示例（原问题代码） #

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  const myLatLng = {
    lat: -34.397,
    lng: 150.644
  };

  const map = new Map(document.getElementById("map"), {
    center: myLatLng,
    zoom: 8,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });
  
  const marker = new AdvancedMarkerElement({
    map,
    position: myLatLng,
    gmpDraggable: true
  });

  marker.addListener('dragend', function(event) {
    const position = marker.position;
    alert(`dragend at (${position.lat}, ${position.lng})`);
  });
}

initMap();

新版Marker拖拽效果 #

解决方案：移除拖拽结束后的焦点 #

AdvancedMarkerElement本质是一个自定义HTMLElement，支持标准DOM的焦点操作方法。只需在dragend事件回调中调用blur()方法，即可移除标记的焦点，从而隐藏残留的bounding box。

修改后的代码示例 #

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  const myLatLng = {
    lat: -34.397,
    lng: 150.644
  };

  const map = new Map(document.getElementById("map"), {
    center: myLatLng,
    zoom: 8,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });
  
  const marker = new AdvancedMarkerElement({
    map,
    position: myLatLng,
    gmpDraggable: true
  });

  marker.addListener('dragend', function(event) {
    const position = marker.position;
    alert(`dragend at (${position.lat}, ${position.lng})`);
    // 移除标记焦点，消除bounding box
    marker.blur();
  });
}

initMap();

补充说明 #

• 调用blur()是最直接解决焦点残留问题的方案，完全适配AdvancedMarkerElement的DOM特性。
• 如果需要模拟传统Marker的十字准星体验，可以通过AdvancedMarkerElement的content属性传入自定义DOM元素，结合dragstart/drag事件添加准星样式，实现更贴近传统的拖拽视觉效果，但这属于额外定制需求。

内容的提问来源于stack exchange，提问作者drmrbrewer