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

Question

再会！我有一个使用 cordova （html 和 javascript）的本机应用程序。当用户更改其位置或坐标更改时，我需要帮助实时移动地图上的标记。这是完整的源代码mapping.jsvar 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]  });因此，我的 html 文件上有 3 个按钮，它们调用 js 文件中的 3 个函数 - startWatching()，stopWatching()以及showHistory()function startWatching()将在用户移动或改变位置时观察坐标。 function stopWatching()将停止观看或获取坐标。 function showHistory()将显示观看的坐标列表。var redIcon是用户位置的标记，之后getLocation() var violetIcon是定义位置的标记将function f1(a, b)在地图上显示 2 个标记 - 一个标记用于定义的位置，另一个标记是function getLocation()发生时用户的位置。现在，当用户更改其位置或在地图上生成新坐标时，我需要移动用户位置的标记。我希望有人能在这方面帮助我。预先感谢`

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

}

现在，当用户的位置已更新时，您可以userMarker在函数中使用标记实例。onSuccess使用该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]);

  }

}