我来帮你搞定这两个Leaflet使用中的问题，先从优先级更高的地图缩放需求开始：

问题1：移动Marker时将地图缩放至以Marker为中心的15km半径区域 #

Leaflet自带的LatLng.toBounds()方法可以直接根据指定半径（单位：米）生成一个边界范围，我们只需要在每次更新Marker位置后，让地图适配这个边界就能实现需求。

修改你代码里的setInterval部分，添加地图适配逻辑：

setInterval(function () {
  lat = lat + ((Math.random() * 1) - 0.25) * 0.001;
  lng = lng + ((Math.random() * 1) - 0.5) * 0.001;
  var newLatLng = [lat, lng];
  marker.setLatLng(newLatLng).update();
  
  // 核心代码：让地图适配15km半径的范围，Marker自动居中
  map.fitBounds(marker.getLatLng().toBounds(15000));
}, 200);

代码说明： #

• marker.getLatLng().toBounds(15000)：生成以当前Marker位置为中心，半径15000米（即15km）的矩形边界
• map.fitBounds()：自动调整地图的缩放级别和平移位置，刚好完整显示这个边界，确保Marker始终处于地图中心

问题2：移动Marker时绘制轨迹线条 #

要实现轨迹绘制，我们需要维护一个存储Marker历史坐标的数组，再用L.polyline图层动态更新线条内容：

1. 先在代码开头初始化轨迹相关的变量和图层：

// 存储轨迹点的数组
var trackPoints = [];
// 创建初始轨迹线条（初始为空），设置蓝色样式并添加到地图
var trackLine = L.polyline(trackPoints, {color: 'blue', weight: 2}).addTo(map);

2. 然后在每次更新Marker位置时，把新坐标加入数组并更新线条：

setInterval(function () {
  lat = lat + ((Math.random() * 1) - 0.25) * 0.001;
  lng = lng + ((Math.random() * 1) - 0.5) * 0.001;
  var newLatLng = [lat, lng];
  marker.setLatLng(newLatLng).update();
  
  // 解决问题1的代码...
  
  // 核心代码：更新轨迹线条
  trackPoints.push(newLatLng);
  trackLine.setLatLngs(trackPoints);
  
  // 可选：限制轨迹点数量，避免数组过大（比如只保留最近100个点）
  if(trackPoints.length > 100) {
    trackPoints.shift();
  }
}, 200);

完整修改后的核心代码片段 #

// Create the map
var map = L.map('map').setView([-31.4, -64.183], 12);
// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  { maxZoom: 18 }).addTo(map);
// add a marker in the given location
var lat = -31.4;
var lng = -64.183;
var marker = L.marker([lat, lng]).addTo(map);

// 初始化轨迹相关（问题2）
var trackPoints = [];
var trackLine = L.polyline(trackPoints, {color: 'blue', weight: 2}).addTo(map);

// add a layer and add points
var myLayer = L.geoJson().addTo(map);
// geojsonFeature
var geojsonFeature = {
  "type": "Feature",
  "properties": {
    "name": "Coors Field",
    "amenity": "Baseball Stadium",
    "popupContent": "This is where the Rockies play!"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [-104.99404, 39.75621]
  }
};
// put the marker
setTimeout(function () {
  myLayer.addData(geojsonFeature);
}, 1000);
// update the marker
setTimeout(function () {
  // clear layer
  myLayer.clearLayers(); // inherited from LayerGroup
  //myLayer.addData(geojsonFeature);
}, 3000);
// put the marker
setTimeout(function () {
  myLayer.addData(geojsonFeature);
}, 5000);
// just fooling around
setInterval(function () {
  lat = lat + ((Math.random() * 1) - 0.25) * 0.001;
  lng = lng + ((Math.random() * 1) - 0.5) * 0.001;
  var newLatLng = [lat, lng];
  marker.setLatLng(newLatLng).update();
  
  // 解决问题1：适配15km半径范围
  map.fitBounds(marker.getLatLng().toBounds(15000));
  
  // 解决问题2：更新轨迹线条
  trackPoints.push(newLatLng);
  trackLine.setLatLngs(trackPoints);
  
  // 可选：限制轨迹点数量
  if(trackPoints.length > 100) {
    trackPoints.shift();
  }
}, 200);

这样修改后，你的两个需求就都能实现啦。

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