如何在JavaScript中正确读取GeoJSON文件（Leaflet+OSM场景）

核心错误原因 #

1. 传参错误：你把GeoJSON文件的路径字符串直接传给了L.geoJSON()，但这个方法需要的是解析后的JSON对象，不是文件路径。
2. 坐标顺序不符：GeoJSON规范里的坐标是[经度, 纬度]，但你写的是[34.0595..., -118.2503...]（纬度在前、经度在后），不符合规范，会导致解析失败。
3. 属性缺失：你的样式函数里调用了feature.properties.color，但GeoJSON里没有这个属性，会导致后续渲染报错。

修复后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Interactive Map</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <style>
            #map {
                height: 500px;
                width: 100%;
            }
            .leaflet-popup-content{ width: 330px !important; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            const mymap = L.map('map').setView([34.0000, -118.300], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
                maxZoom: 18
            }).addTo(mymap);
            const laCounty = L.marker([34.05951960593492, -118.25037820245461], 13).addTo(mymap);
            laCounty.bindPopup("<b>Location Name</b><br><b>Address:</b> <br /><b>Phone:</b>").openPopup();

            mymap.on('click', function(e) { 
                L.marker(e.latlng).addTo(mymap); 
            });

            // 加载并解析GeoJSON文件后再传入L.geoJSON
            $.getJSON('json/geomap.geojson', function(data) {
                L.geoJSON(data, {
                    // 给样式函数加默认值，避免属性缺失报错
                    style: function(feature) {
                        return {color: feature.properties.color || '#ff0000'};
                    },
                    onEachFeature: function(feature, layer) {
                        layer.bindPopup(feature.properties.name);
                    }
                }).addTo(mymap);
            });
        </script>
    </body>
</html>

修正后的GeoJSON文件（geomap.geojson） #

{
   "type":"FeatureCollection",
   "features":[ 
      {
         "type":"Feature",
         "geometry":{ 
            "type":"Point",
            "coordinates":[ 
               -118.25037820245461,
               34.05951960593492
            ]
         },
         "properties":{ 
            "name":"location name",
            "address":"address of location",
            "phone_number":"phone number",
            "color":"#ff0000" // 可选：添加color属性匹配样式函数
         }
      }
   ]
}

关键修复点说明 #

• 用$.getJSON()加载GeoJSON文件，解析成JSON对象后再传给L.geoJSON()
• 调整GeoJSON坐标顺序为[经度, 纬度]，符合规范
• 给样式函数设置默认颜色，或在GeoJSON中补充color属性，避免因属性缺失报错

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