删除或移动在聚焦的 AdvancedMarkerElement 周围绘制的框架

Question

我在这个问题中将

AdvancedMarkerElement

居中时遇到了问题：在其位置的中心绘制AdvancedMarkerElement

该解决方案有效，但仅限于标记本身。但当聚焦时，标记会在标记的原始（未变换）位置周围绘制一个框架。

我需要移除框架或正确变换框架才能再次居中。

我使用的是火狐浏览器。

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()

#map {
  height: 250px;
}

<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>

我真的不明白为什么要画它。 我无法指定它不通过 Google Maps API 绘制框架。

我也尝试过 Chromium，它在开始时给出了类似的结果，但经过一些拖动后，它不再绘制它，非常不一致。

感谢您的帮助。

Answer 1

我检查了官方文档中的一些高级标记示例，并注意到标记实际上没有正确指向正确的位置...所以显然他们不需要对 SVG 或 HTML 元素进行任何类型的重新定位，这可能可以解释为什么目前似乎没有任何记录......

正如我在评论中所说，我认为对如此简单的图形元素使用 SVG 没有任何好处，因此我使用 HTML 元素创建了一个类似的标记。

似乎添加边距（在本例中为负边距）而不是使用 CSS 翻译可以解决该问题。焦点轮廓与标记对齐。

虽然我无法确认这是推荐的方法，但它似乎有效并且正确地集中在该位置。

async function initMap() {

  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const center = {
    lat: 0,
    lng: 0
  }
  
  const map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });

  const htmlMarker = document.createElement('div')
  htmlMarker.className = 'black-square';

  let marker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: center,
    content: htmlMarker,
    gmpDraggable: true,
    gmpClickable: true
  });

  let defaultMarker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: center
  });
}

initMap();

#map {
  height: 150px;
}

.black-square {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: black;
  margin-bottom: -8px;
}

<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: "weekly"});</script>