javascript - 当用户更改位置或坐标更改时更新 map 上标记的位置

Question

美好的一天!我有一个使用 cordova (html 和 javascript)的 native 应用程序。当用户更改其位置或坐标更改时，我需要帮助实时移动 map 上的标记。

这是mapping.js的完整源代码

var mbAttr =
    'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '© <a href="https://www.mapbox.com/">Mapbox</a>',
  mbUrl =
    "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw";

var redIcon = new L.Icon({
  iconUrl:
    "https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png",
  shadowUrl:
    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

var violetIcon = new L.Icon({
  iconUrl:
    "https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png",
  shadowUrl:
    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
  iconSize: [35, 51],
  iconAnchor: [17, 51],
  popupAnchor: [1, -34],
  shadowSize: [51, 51]
});

var streets = L.tileLayer(mbUrl, { id: "mapbox.streets", attribution: mbAttr });

var mymap;
var locationHistory = [];
var watch;

function f1(a, b) {
  lat = a;
  lon = b;

  mymap = L.map("mapid", {
    center: [14.54965, 121.00737],
    zoom: 16,
    layers: [streets]
  });

  L.marker([14.4311, 120.9682], { icon: violetIcon })
    .addTo(mymap)
    .bindPopup("New Bacoor City Hall");

  L.marker([a, b], { icon: redIcon })
    .addTo(mymap)
    .bindPopup("You are here.")
    .openPopup()
    .update();
}


function getLocation() {
  navigator.geolocation.getCurrentPosition(showPosition, showError);
}

function showPosition(position) {
  f1(position.coords.latitude, position.coords.longitude);
}

function showHistory() {
  var el = document.getElementById("historyWrapper");
  if (el.style.display === "none") {
    el.style.display = "block";
  } else {
    el.style.display = "none";
  }
}

function startWatching() {
  var toastHTML = "Tracking started...";
  M.toast({html: toastHTML, displayLength: 3000});
  watch = navigator.geolocation.watchPosition(onSuccess, onError, {
    maximumAge: 10000,
    timeout: 5000,
    enableHighAccuracy: true
  });
  var el = document.getElementById("historyWrapper");
  el.style.display = "none";
}

function stopWatching() {
  if (confirm("Do you want to stop tracking?")) {
    var toastHTML = "Tracking Stopped.";
    M.toast({html: toastHTML, displayLength: 3000});
    navigator.geolocation.clearWatch(watch);
    var el = document.getElementById("locationHistory");
    locationHistory.forEach(function(location) {
      el.innerHTML =
        "<li>Latitude: " +
        location.coords.latitude +
        "<br />" +
        "Longitude: " +
        location.coords.longitude +
        "<br />" +
        "<strong>Date: " +
        new Date().toLocaleString() +
        "</strong><hr /></li>" +
        el.innerHTML;
    });
    document.getElementById("historyWrapper").style.display = "block";

    document.getElementById("geolocation").innerHTML = "";
  }
}

function showError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      var toastHTML = "User denied the request for geolocation.";
      M.toast({html: toastHTML, displayLength: 3000});
      break;
    case error.POSITION_UNAVAILABLE:
      var toastHTML = "Location information is unavailable.";
      M.toast({html: toastHTML, displayLength: 3000});
      break;
    case error.TIMEOUT:
      var toastHTML = "The request to get user location timed out.";
      M.toast({html: toastHTML, displayLength: 3000});
      break;
    case error.UNKNOWN_ERROR:
      var toastHTML = "An unknown error occurred.";
      M.toast({html: toastHTML, displayLength: 3000});
      break;
  }
  window.close();
}

function onSuccess(position) {
  locationHistory.push(position);
  var element = document.getElementById("geolocation");
  element.innerHTML = "";
  element.innerHTML =
    "Latitude: " +
    position.coords.latitude +
    "<br />" +
    "Longitude: " +
    position.coords.longitude +
    "<br />" +
    "<hr />" +
    element.innerHTML;
}

function onError(error) {
  var toastHTML = "code: " + error.code + "\n" + "message: " + error.message + "\n";
  M.toast({html: toastHTML, displayLength: 3000});
}

getLocation();

所以，我的 html 文件上有 3 个按钮，它们调用 js 文件中的 3 个函数 - startWatching() 、 stopWatching() 和 showHistory( )

function startWatching() 将在用户移动或更改位置时监视坐标。function stopWatching() 将停止观看或获取坐标。函数 showHistory() 将显示观察到的坐标列表。

var redIcon 是 getLocation() 之后用户位置的标记var violetIcon 是定义位置的标记

函数 f1(a, b) 将在 map 上显示 2 个标记 - 一个标记用于定义的位置，另一个标记是当 function getLocation( ) 发生。

现在，当用户更改其位置或在 map 上生成新坐标时，我需要移动用户位置的标记。我希望有人能在这方面帮助我。提前致谢`

Answer 1

您需要在 f1 函数之外访问您的用户标记。您可以通过将标记分配给全局定义的变量来完成此操作。

在全局范围内定义标记变量。

var userMarker = null;

在您的 f1 函数中，将创建的标记分配给 userMarker 变量。

function f1(a, b) {
  ...
  userMarker = L.marker([a, b], { icon: redIcon })
    .addTo(mymap)
    .bindPopup("You are here.")
    .openPopup()
    .update();
}

现在，当用户的位置已更新时，您可以在 onSuccess 函数中使用 userMarker 标记实例。使用setLatLng()方法用新坐标更新标记的位置。

function onSuccess(position) {
  // Destructure assignment to get the lat and long from the position object.
  let { latitude, longitude } = position.coords;
  if (userMarker !== null) {
    userMarker.setLatLng([latitude, longitude]);
  }
}