如何让 Google Maps JavaScript API 标记跟踪我的位置？

Question

我正在尝试使用 Google Maps JavaScript API 制作一个简单的跟踪网络应用程序。我已经成功创建了以我的位置为中心的地图，实际上它确实跟踪了我的位置。但问题是，当我移动时，它会根据每个新请求创建一个新的 AdvancedMarkerElement，所以基本上，当我使用设备移动时，我的地图上充满了多个标记。

我的目标是修改脚本，以便当我移动和删除旧位置时，它会在我的新位置上创建一个新标记。我如何实现它并不重要（它可能会自行刷新，移动到新位置或删除插入）。我看到有些人建议使用

setPosition()

方法，但显然这是 Google Maps API 中旧 Marker 对象中使用的方法。然后我看到了另一个建议，它基本上检查是否存在现有标记，如果存在，则将其删除并创建一个新标记。

这是我的脚本。希望它有足够的解释：

// Initialize and add the map
let map;

async function initMap() {
  // The location of Adana / Türkiye
  const position = { lat: 37.000000, lng: 35.321335 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // Options
  var options = {
    zoom: 18,
    center: position,
    mapId: "DEMO_MAP_ID",
  }

  // The map, centered at Adana / Türkiye
  map = new Map(document.getElementById("map"), options);
  //Tracking interface
  const trackDetails = document.createElement("div");
  trackDetails.classList.add("tracking-interface");
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(trackDetails);

  //Variable that holds the request counts
  var reqcount = 0;

  //Tracking function with callbacks using geolocation
  navigator.geolocation.watchPosition(successCallback);

  //Success callback function with details added to the div.
  function successCallback(position){
    const {latitude, longitude, accuracy, altitude, heading, speed} = position.coords;

    reqcount++;
    trackDetails.innerHTML = "Latitude: "+ latitude +"</br>";
    trackDetails.innerHTML += "Longitude: "+ longitude +"</br>";
    trackDetails.innerHTML += "Accuracy: "+ accuracy +"</br>";
    trackDetails.innerHTML += "Altitude: "+ altitude +"</br>";
    trackDetails.innerHTML += "Heading: "+ heading +"</br>";
    trackDetails.innerHTML += "Longitude: "+ longitude +"</br>";
    trackDetails.innerHTML += "Speed: "+ speed +"</br>";
    trackDetails.innerHTML += "Request Count: "+ reqcount;

    map.setCenter({lat: latitude, lng: longitude});

    const markerProps = {
      map: map,
      position: {lat: latitude, lng: longitude},
    }

    //Checks and deletes the older markers and adds the new one
    if (typeof(marker) != "undefined") marker.setMap(null);
    marker = new AdvancedMarkerElement(markerProps);

  }
}

initMap();

我对这个 API 不太了解，但似乎我找不到任何错误，但它不起作用（开发工具控制台中也没有错误）。它显示了我的位置，在上面放置了一个标记，但标记的位置不会改变。

如果您的建议不会删除地图中的所有标记，那就太好了，因为我将尝试实现的下一步是同时跟踪第二个位置。

我还将我的作品当前状态部署在netlify站点中进行测试，您也可以使用它来测试：https://amazing-pastelito-e9dc6e.netlify.app/

Answer 1

您需要更新标记的位置，而不是每次位置发生变化时都创建一个新标记。

首先，需要在回调函数外声明maker变量，然后检查标记是否存在并更新标记位置，如果不存在则创建它。

let map;
let marker;

async function initMap() {
  const position = { lat: 37.000000, lng: 35.321335 };
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  var options = {
    zoom: 18,
    center: position,
    mapId: "DEMO_MAP_ID",
  }

  map = new Map(document.getElementById("map"), options);
  const trackDetails = document.createElement("div");
  trackDetails.classList.add("tracking-interface");
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(trackDetails);

  navigator.geolocation.watchPosition(successCallback);

  function successCallback(position){
    const {latitude, longitude, accuracy, altitude, heading, speed} = position.coords;

    trackDetails.innerHTML = `Latitude: ${latitude}<br>`;
    trackDetails.innerHTML += `Longitude: ${longitude}<br>`;
    trackDetails.innerHTML += `Accuracy: ${accuracy}<br>`;
    trackDetails.innerHTML += `Altitude: ${altitude}<br>`;
    trackDetails.innerHTML += `Heading: ${heading}<br>`;
    trackDetails.innerHTML += `Speed: ${speed}<br>`;
    trackDetails.innerHTML += `Request Count: ${++reqcount}`;

    map.setCenter({lat: latitude, lng: longitude});

    if (marker) {
      marker.setProperties({position: {lat: latitude, lng: longitude}});
    } else {
      marker = new AdvancedMarkerElement({
        map: map,
        position: {lat: latitude, lng: longitude},
      });
    }
  }
}

initMap();