问当用户更改位置或坐标更改时，更新地图上标记的位置

EN

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