通过AJAX调用将GeoJSON数据提取到Leaflet中

Balazs 发表于 Dev

巴拉兹

我是Leaflet的新手，我想知道如何将MySQL数据库中的标记加载到Leaflet映射上。如何使用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>

标记不会显示在地图上。我也尝试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',)

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

jQuery的AJAX支持这些值dataType：xml，json，script，和html（来自文件）。它将尝试基于此解析响应，并且“ 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) });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。