Leaflet中Marker与Circle Marker同坐标下视觉位置不符问题

你遇到的视觉位置偏差问题，核心原因在于混用了L.geoJson()图层的addLayer()（添加原生Leaflet图层）和addData()（添加GeoJSON数据）方法，再加上一些代码细节的小问题，导致渲染时出现了坐标视觉错位。下面给你两种针对性的解决方案：

方案一：改用普通FeatureGroup（推荐） #

如果你的需求只是管理Marker和CircleMarker这类原生Leaflet图层，完全不需要用L.geoJson()，直接用L.featureGroup()更简单，也能避免GeoJSON坐标转换的潜在问题：

var map = L.map('map').setView([51.505, -0.09], 18);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker1 = L.marker([51.505, -0.09]);
// 使用普通FeatureGroup替代GeoJSON图层
var featureGroup = L.featureGroup();

// 批量添加CircleMarker（直接创建原生图层，无需GeoJSON转换）
var index = 4000;
while(index){
  // 用数值计算替代字符串拼接，避免类型转换意外
  var y = 51.5 + (index / 10000);
  var circleMarker = L.circleMarker([y, -0.09]);
  featureGroup.addLayer(circleMarker);
  index--;
}

featureGroup.addLayer(marker1);
map.addLayer(featureGroup);

setTimeout(function(){
  // 直接传入图层对象移除，不要用_leaflet_id（内部属性不推荐直接调用）
  featureGroup.removeLayer(marker1);
  // 创建同坐标的CircleMarker并添加
  var circleMarker = L.circleMarker(marker1.getLatLng());
  featureGroup.addLayer(circleMarker);
},2000);

方案二：保留L.geoJson()的修正版 #

如果业务上必须使用GeoJSON图层，调整以下细节即可解决问题：

1. 移除图层时直接传递图层对象，不要依赖内部的_leaflet_id
2. 优化批量添加时的纬度计算逻辑，避免字符串拼接的潜在风险

var map = L.map('map').setView([51.505, -0.09], 18);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker1 = L.marker([51.505, -0.09]);
// 变量名避免和Leaflet原生构造函数重名，改成geoJsonGroup
var geoJsonGroup = L.geoJson([],{
  pointToLayer: function(f,l){
    return L.circleMarker(l);
  }
});

// 批量添加GeoJSON Feature，优化纬度计算
var index = 4000;
while(index){
  var y = 51.5 + (index / 10000);
  geoJsonGroup.addData({
    type:"Feature",
    properties: {},
    geometry:{
      type:"Point",
      coordinates:[-0.09, y] // GeoJSON坐标严格遵循[经度, 纬度]顺序
    }
  });
  index--;
}

geoJsonGroup.addLayer(marker1);
map.addLayer(geoJsonGroup);

setTimeout(function(){
  // 直接移除marker1对象
  geoJsonGroup.removeLayer(marker1);
  // 创建格式正确的GeoJSON Feature
  var feature = {
    type:"Feature",
    properties: {},
    geometry:{
      type:"Point",
      coordinates:[marker1.getLatLng().lng, marker1.getLatLng().lat]
    }
  };
  geoJsonGroup.addData(feature);
},2000);

额外注意点 #

• 不要用FeatureGroup作为变量名，它和Leaflet原生的L.FeatureGroup构造函数重名，容易引发混淆
• GeoJSON的坐标格式是**[经度, 纬度]，而Leaflet原生图层（Marker/CircleMarker）的坐标是[纬度, 经度]**，这一点一定要区分清楚

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