移除或修正AdvancedMarkerElement聚焦时错位的外框

我之前解决了AdvancedMarkerElement的居中问题，但仅对标记本身生效。当标记获得焦点时，外框会绘制在标记未变换的原始位置。我需要移除该外框或使其与标记重新居中对齐。

测试表现：

• Firefox：始终出现外框错位问题
• Chromium：初始表现类似，但拖拽后外框消失，表现不稳定

在Google Maps API中未找到关闭该外框的设置项，相关代码示例如下：

JavaScript代码 #

const HANDLE_ICON =
  '<svg xmlns="http://www.w3.org/2000/svg" transform="translate(0 8)" height="16px" viewBox="0 -960 960 960" width="16px" fill="#000"><path d="M214-74q-59.12 0-99.56-40.44Q74-154.88 74-214v-532q0-59.13 40.44-99.56Q154.88-886 214-886h532q59.13 0 99.56 40.44Q886-805.13 886-746v532q0 59.12-40.44 99.56Q805.13-74 746-74H214Z"/>  </svg>';


async function initMap() {
  // Request libraries when needed, not in the script tag.
  const {
    Map
  } = await google.maps.importLibrary("maps");
  const {
    AdvancedMarkerElement
  } = await google.maps.importLibrary("marker");

  const latlng = {
    lat: 10,
    lng: 12
  }
  const map = new Map(document.getElementById("map"), {
    zoom: 16,
    center: latlng,
    mapId: "4504f8b37365c3d0",
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });

  const parser = new DOMParser();
  const pinSvg = parser.parseFromString(
    HANDLE_ICON,
    "image/svg+xml"
  ).documentElement;

  // Create
  const marker = new AdvancedMarkerElement({
    map: map,
    position: latlng,
    content: pinSvg,
    gmpDraggable: true,
    gmpClickable: true,
  });
}

initMap()

CSS代码 #

#map {
  height: 250px;
}

HTML代码 #

<div id="map"></div>


<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "beta"});</script>

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