Question

我是Leaflet的新手，我想知道如何将MySQL数据库中的标记加载到传单地图上。如何使用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',)

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) });

使用AJAX调用将{GeoJSON数据拉入Leaflet

1 个答案: