Leaflet地图如何实现“显示我的位置”跟随模式切换功能？

你需要的位置跟随切换功能有两种成熟的实现路径，不需要完全从零开发： #

方案1：使用Leaflet生态现成控件 #

Leaflet社区有标准的定位控件L.Control.Locate，原生就支持你需要的全部逻辑：默认开启位置跟随、用户手动拖动地图自动退出跟随、点击按钮重新定位并恢复跟随，交互逻辑和谷歌地图完全一致。如果你不介意引入少量第三方依赖，可以直接使用该控件。 #

方案2：基于现有代码轻量改造（推荐，无额外依赖） #

只需要对你的现有代码做4处小修改，10行左右代码就能实现全部效果：

1. 先声明一个全局的跟随状态变量，默认开启跟随

let isFollowEnabled = true;

2. 监听地图的手动拖动事件，用户拖动地图时自动关闭跟随模式

// 放在地图初始化完成后的位置即可
mymap.on('dragstart', function() {
  isFollowEnabled = false;
  // 可在这里同步修改定位按钮的样式为未激活状态
});

3. 自定义一个定位切换按钮，添加到地图上

// 扩展Leaflet原生Control创建按钮
L.Control.LocateBtn = L.Control.extend({
  onAdd: function(map) {
    const btn = L.DomUtil.create('button', 'locate-btn');
    btn.innerHTML = '📍'; // 可替换为你自己的定位图标
    // 基础样式，可根据需求自定义
    btn.style.padding = '8px 10px';
    btn.style.fontSize = '16px';
    btn.style.border = 'none';
    btn.style.borderRadius = '4px';
    btn.style.background = '#fff';
    btn.style.cursor = 'pointer';

    // 点击按钮事件：恢复跟随并定位到当前位置
    L.DomEvent.on(btn, 'click', function() {
      isFollowEnabled = true;
      mymap.panTo([latitude, longitude]);
      // 可在这里同步修改定位按钮的样式为激活状态
    });
    return btn;
  }
});
// 将按钮添加到地图右上角
new L.Control.LocateBtn({position: 'topright'}).addTo(mymap);

4. 修改你现有的updatemap函数，添加跟随状态判断

function updatemap() {
  playerLoc.setLatLng([latitude,longitude]);
  // 仅跟随模式开启时自动平移地图
  if (isFollowEnabled) {
    mymap.panTo([latitude,longitude]);
  }
}

如果需要优化按钮交互，可额外添加CSS区分激活/未激活状态，比如跟随开启时按钮显示蓝色背景，关闭时显示白色背景即可。

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