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

Question

再会！我有一个使用 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]

  });

因此，我的 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]);  }}