logo标签列表

Google地图API高级标记视图设置位置？

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersgoogle-maps-advanced-marker-element
3
我使用advancedMarkerView创建了一个标记。
const centerMarkerE = document.createElement("div");
let centerMarkerHtml = "<div class='center_marker'><img src='/images/front/pin.png' /></div>";
centerMarkerE.innerHTML = centerMarkerHtml;

centerMarker = new google.maps.marker.AdvancedMarkerView({
  map,
  position: initialLocation,
  content: centerMarkerE,
});

对于普通的标记，我可以使用setPosition(initialLocation)来设置位置，但对于AdvancedMarkerView则不起作用。
我该如何改变高级标记的位置？
2个回答
2

使用点表示法而不是设置方法

AdvancedMarkerElementOptions接口有一个position属性。文档以以下方式描述它：

设置AdvancedMarkerElement的位置。可以构造没有位置的AdvancedMarkerElement，但在提供位置之前，它将不会显示出来 - 例如，通过用户的操作或选择。如果在构造时未提供位置，则可以通过设置AdvancedMarkerElement.position来提供AdvancedMarkerElement的位置。

所以如果你要实例化一个高级标记器，可以这样做：

const marker = new AdvancedMarkerElement({
  map,
  position: { lat: 14.535455012359806, lng: 120.98195420962453 },
});

你可以在点击事件监听器中像这样改变位置：
btn.addEventListener("click", function(){
    // This is how to change marker location
    marker.position = {lat: 14.53546539778815,  lng: 120.98422872277972}
});

这应该按预期工作。
这是一个示例片段，您可以玩弄和检查： 

async function initMap() {
  // Request needed libraries.
  const btn = document.getElementById("change-location-btn");
    const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 14.535455012359806, lng: 120.98195420962453 },
    zoom: 16,
    mapId: "4504f8b37365c3d0",
  });
  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 14.535455012359806, lng: 120.98195420962453 },
  });
    
    // button to change location
btn.addEventListener("click", function(){
//      map.setCenter({lat: 14.53546539778815,  lng: 120.98422872277972})
    // This is how to change marker location
    marker.position = {lat: 14.53546539778815,  lng: 120.98422872277972}
});
    
}

initMap();
 
/* 
 * 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>
  <head>
    <title>Default 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>
        <button id="change-location-btn">Change Location</button>
    <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>
  </body>
</html>

希望这能帮到你！
0
我在更新当前标记的位置时遇到了问题，使用@googlemaps/react-wrapper。@yrll的答案指导了我正确的方向，但是仅仅更新位置是不够的。每次点击触发时更新位置会在地图上添加一个新的标记。为了使其按预期工作，我不得不改变我定义AdvancedMarkerElement的方式。我不将地图对象传递给构造函数。
  useEffect(() => {
    const pinBackground = new google.maps.marker.PinElement({
      background: "#FBBC04",
    });
    const marker = new google.maps.marker.AdvancedMarkerElement({
      content: pinBackground.element,
    });
    setMarker(marker);
  }, []);

相反，我在第一次更改时将地图传递给标记器。然后它按预期工作。
  const updateMarker = useCallback(
    (location: google.maps.LatLng) => {
      if (marker) {
        if (!marker.map) {
          marker.map = map;
        }
        if (marker.position !== location) marker.position = location;
      }
    },
    [map, marker]
  );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接