使用Leaflet及Leaflet-google插件无法添加GeoJSON标记求助

看起来你的GeoJSON数据已经成功加载（能打印feature.properties.title就证明了这一点），问题出在L.geoJson的配置逻辑上，我帮你梳理下核心问题和修正方案：

核心错误点 #

1. pointToLayer语法错误：你在L.geoJson的配置里直接写了return L.marker(...)，但没有正确定义pointToLayer这个选项，Leaflet无法识别这个自定义标记的生成逻辑。
2. 坐标顺序不匹配：GeoJSON的坐标格式是[经度, 纬度]，但Leaflet的L.marker()需要的是[纬度, 经度]，如果不调整顺序，标记会出现在错误位置（甚至超出地图可视范围）。

修正后的完整代码 #

var map = L.map(mapDiv).setView([-33.450301, 150.060243], 6);
var zoomControl = new L.Control.Zoom({ position: 'topright' });
var baseballIcon = L.icon({
  iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon.png',
  iconSize: [32, 37],
  iconAnchor: [16, 37],
  popupAnchor: [0, -28]
});
// 假设baseLayers和ggl是你已正确定义的图层变量
var layersControl = L.control.layers(baseLayers, null, { collapsed: false });
layersControl.addTo(map);
zoomControl.addTo(map);
map.addLayer(ggl);

function onEachFeature(feature, layer) {
  if (feature.properties && feature.properties.title) {
    console.log(feature.properties.title);
    layer.bindPopup(feature.properties.title);
  }
}

// 替换成你的GeoJSON数据源地址或直接传入数据对象
$.getJSON('your-geojson-source', function(data) {
  L.geoJson(data, {
    // 正确定义pointToLayer回调，指定自定义标记生成逻辑
    pointToLayer: function(feature, latlng) {
      // 反转坐标：GeoJSON是[lon, lat]，Leaflet需要[lat, lon]
      return L.marker([latlng.lat, latlng.lng], { icon: baseballIcon });
    },
    onEachFeature: onEachFeature
  }).addTo(map);
});

关键修改说明 #

• 给L.geoJson添加了pointToLayer回调函数，明确告诉Leaflet如何将GeoJSON点要素转换为自定义标记；
• 在回调里处理了坐标顺序反转，确保标记出现在正确的地理位置；
• 修正了原代码里L.geoJson配置的语法错误（原代码直接把return语句暴露在配置对象中，属于语法问题）。

替换上述GeoJSON加载部分的代码后，标记应该就能正常显示在地图上了。

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