Leaflet点击标记后自动跟踪其GPS更新位置并可停止的实现方法

1. 定义全局跟踪状态变量 #

在地图初始化的同级作用域声明变量，存储当前处于跟踪状态的标记实例：

// 为空时代表没有正在跟踪的标记
let currentTrackedMarker = null;

2. 给每个标记绑定点击切换跟踪的事件 #

创建标记时直接绑定点击事件，实现跟踪/取消跟踪的切换逻辑，无需额外按钮：

// 示例为标记创建逻辑，可直接替换你原有代码
const marker = L.marker([lat, lng]).addTo(mymap);
marker.bindPopup('GPS设备标记');

// 绑定点击切换跟踪事件
marker.on('click', function() {
  if (currentTrackedMarker === this) {
    // 点击已跟踪的标记，执行取消跟踪逻辑
    currentTrackedMarker = null;
    // 可选：恢复标记默认图标给用户反馈
    this.setIcon(defaultMarkerIcon);
  } else {
    // 先取消之前标记的跟踪状态
    if (currentTrackedMarker) {
      currentTrackedMarker.setIcon(defaultMarkerIcon);
    }
    // 把当前点击标记设为跟踪对象
    currentTrackedMarker = this;
    // 可选：切换特殊图标提示用户该标记正在被跟踪
    this.setIcon(trackingMarkerIcon);
    // 首次点击直接对齐到地图中心
    mymap.panTo(this.getLatLng());
  }
})

3. 修改标记位置更新逻辑 #

在你原有接收GPS数据、更新标记位置的代码中，新增自动居中判断：

// 示例为标记位置更新逻辑，可直接嵌入你原有逻辑中
function updateMarkerPos(marker, newLat, newLng) {
  const newLatLng = L.latLng(newLat, newLng);
  marker.setLatLng(newLatLng);
  // 新增：如果当前更新的标记是被跟踪对象，自动对齐到地图中心
  if (currentTrackedMarker === marker) {
    mymap.panTo(newLatLng);
    // 若需要自适应边界而非严格居中，可替换为下面的代码
    // mymap.fitBounds(marker.getBounds());
  }
}

4. 可选扩展：拖拽地图自动停止跟踪 #

符合常规操作习惯，用户手动拖动地图时自动退出跟踪状态：

mymap.on('dragstart', function() {
  if (currentTrackedMarker) {
    currentTrackedMarker.setIcon(defaultMarkerIcon);
    currentTrackedMarker = null;
  }
})

内容的提问来源于stack exchange，提问作者confused