javascript - 使用 AJAX 调用将 GeoJSON 数据拉入 Leaflet

Question

我是 Leaflet 的新手，我想知道如何将标记从 MySQL 数据库加载到传单 map 上。如何使用 PHP 和 ajax 从 MySQL 加载标记？

.....{"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":[-122.340141,47.60894]},"properties":{"name":"Pan
Africa Market","address":"1521 1st Ave, Seattle,WA","type":"restaurant"}},.......

传单代码:

<script>
    var map = L.map('map').setView([47.6145, -122.3418], 13);

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

        $.ajax({
            type: "GET",
            url: "./geojson.php",
            dataType: "geojson", 
            success: function(response) {
                    L.geoJson(response, {
                        onEachFeature: onEachFeature
                    }).addTo(map);
            }
         }).error(function() {});


            function onEachFeature(feature, layer) {
                layer.bindPopup(feature.properties.popupContent);
            }</script>

map 上没有显示标记。我也尝试了 type: "POST"，我检查了 chrome 控制台是否有错误，但没有发现错误。

已更新 geojson.php 输出:

{"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":[-122.340141,47.60894]},"properties":{"name":"Pan Africa Market","address":"1521 1st Ave, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.344391,47.61359]},"properties":{"name":"Buddha Thai & Bar","address":"2222 2nd Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.356445,47.624561]},"properties":{"name":"The Melting Pot","address":"14 Mercer St, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.337654,47.606365]},"properties":{"name":"Ipanema Grill","address":"1225 1st Ave, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.345673,47.612823]},"properties":{"name":"Sake House","address":"2230 1st Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.340363,47.605961]},"properties":{"name":"Crab Pot","address":"1301 Alaskan Way, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.345467,47.613976]},"properties":{"name":"Mama's Mexican Kitchen","address":"2234 2nd Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.326584,47.617214]},"properties":{"name":"Wingdome","address":"1416 E Olive Way, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.342834,47.610126]},"properties":{"name":"Piroshky Piroshky","address":"1908 Pike pl, Seattle, WA","type":"restaurant"}}]}

最后我想通了:有一个缺失的行:

$feature = array(
'type' => 'Feature',)

Answer 1

我怀疑错误在这里:dataType: "geojson"

jQuery 的 AJAX 支持 dataType 的这些值:xml、json、script 和 html (来自 the documentation )。它将尝试基于此解析响应，并且“geojson”不是它知道或识别的值。 dataType 也不要与 contentType 和 mimeType 混淆，它们是不同的东西。

您只需要将其更改为 dataType: "json" 因为 GeoJSON 文件只是 JSON。

您没有收到有关错误的反馈，因为 .error 函数中没有发生任何事情。

    $.ajax({
        type: "GET",
        url: "./geojson.php",
        dataType: "json", 
        success: function(response) {
                L.geoJson(response, {
                    onEachFeature: onEachFeature
                }).addTo(map);
        },
        error: function(response) {
                console.log(response);
        }
     }).error(function(response) { console.log(response) });