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

你好！我有一个使用cordova（html和javascript）的本地应用程序。我需要帮助在用户改变位置或坐标改变时实时移动地图上的标记

以下是

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

var mbAttr=
'地图数据和副本；贡献者，'+
'© ',
mbUrl=
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbdhrqcmz3n3gifq.rjfig214ariislb6b5aw”；
var redIcon=新的L.图标({
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]，
阴影大小：[41,41]
});
var violetIcon=新的L.图标({
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]，
阴影大小：[51,51]
});
var streets=L.Tillelayer（mbUrl，{id:“mapbox.streets”，属性：mbAttr}）；
var-mymap；
var locationHistory=[]；
var手表；
函数f1（a，b）{
lat=a；
lon=b；
mymap=L.map（“mapid”{
中间：[14.54965121.00737]，
缩放：16，
图层：[街道]
});
L.marker（[14.4311120.9682]，{icon:violetIcon}）
.addTo（mymap）
.bindpoop（“新巴库市政厅”）；
L.marker（[a，b]，{icon:redIcon}）
.addTo（mymap）
.bindpoop（“您在这里”）
.openPopup（）
.update（）；
}
函数getLocation（）{
navigator.geolocation.getCurrentPosition（showPosition，showError）；
}
功能显示位置（位置）{
f1（位置坐标纬度、位置坐标经度）；
}
函数showHistory（）{
var el=document.getElementById（“historyWrapper”）；
如果（el.style.display==“无”）{
el.style.display=“块”；
}否则{
el.style.display=“无”；
}
}
函数startWatching（）{
var toastHTML=“跟踪已开始…”；
M.toast（{html:toastHTML，displayLength:3000}）；
watch=navigator.geolocation.watchPosition（onSuccess，onError{
最高限额：10000，
超时：5000，
EnableHighAccurance:正确
});
var el=document.getElementById（“historyWrapper”）；
el.style.display=“无”；
}
函数stopWatching（）{
如果（确认（“是否要停止跟踪？”）{
var toastHTML=“跟踪已停止。”；
M.toast（{html:toastHTML，displayLength:3000}）；
navigator.geolocation.clearWatch（手表）；
var el=document.getElementById（“locationHistory”）；
locationHistory.forEach（函数（位置）{
el.innerHTML=
“
纬度：”+
位置坐标纬度+
“
”+
“经度：”+
位置坐标经度+
“
”+
“日期：”+
新日期（）.toLocaleString（）+
“
”+
el.innerHTML；
});
document.getElementById（“historyWrapper”）.style.display=“block”；
document.getElementById（“地理位置”）.innerHTML=“”；
}
}
功能错误（错误）{
开关（错误代码）{
案例错误。权限被拒绝：
var toastHTML=“用户拒绝了地理定位请求。”；
M.toast（{html:toastHTML，displayLength:3000}）；
打破
案例错误。位置不可用：
var toastHTML=“位置信息不可用。”；
M.toast（{html:toastHTML，displayLength:3000}）；
打破
大小写错误。超时：
var toastHTML=“获取用户位置的请求超时。”；
M.toast（{html:toastHTML，displayLength:3000}）；
打破
案例错误。未知错误：
var toastHTML=“发生未知错误。”；
M.toast（{html:toastHTML，displayLength:3000}）；
打破
}
window.close（）；
}
成功时的功能（位置）{
位置历史。推（位置）；
var element=document.getElementById（“地理位置”）；
element.innerHTML=“”；
element.innerHTML=
“纬度：”+
位置坐标纬度+
“
”+
“经度：”+
位置坐标经度+
“
”+
“
”+
element.innerHTML；
}
函数onError（错误）{
var toastHTML=“代码：”+error.code+“\n”+“消息：”+error.message+“\n”；
M.toast（{html:toastHTML，displayLength:3000}）；
}
getLocation（）；

因此，我的html文件中有3个按钮，它们调用js文件中的3个函数-

startWatching（）

、

stopWatching（）

和

showHistory（）

函数startWatching（）

将在用户移动或更改位置时监视坐标。

函数stopWatching（）

将停止监视或获取坐标。

函数showHistory（）

将显示监视的坐标列表

var redIcon

是

getLocation（）之后用户位置的标记
var violetIcon
是定义位置的标记

函数f1（a，b）
将在地图上显示两个标记-一个标记用于定义的位置，另一个标记是发生
函数getLocation（）
时用户的位置

现在，当用户改变位置或在地图上生成新坐标时，我需要移动用户位置的标记。我希望有人能在这方面帮助我。提前感谢`
您需要在
f1
功能之外访问您的用户标记。可以通过将标记分配给全局定义的变量来实现这一点

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

var userMarker=null；

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

函数f1（a，b）{
...
userMarker=L.marker（[a，b]，{icon:redIcon]