Javascript postgresql web映射Json文件_Javascript_Php_Json_Postgresql

Javascript postgresql web映射Json文件

javascript php json postgresql

Javascript postgresql web映射Json文件,javascript,php,json,postgresql,Javascript,Php,Json,Postgresql,我正在创建一个应用程序web，它寻找使用web地图。我正在使用xampp、postgresql和php（服务器端）以及html、js和CSS（客户端）编码我的代码php代码是： <?php $db = new PDO('pgsql:host=localhost; port=5432; dbname=webmap101;', 'postgres','password'); $sql = $db->query("SELECT id,name,image,web,ca

我正在创建一个应用程序web，它寻找使用web地图。我正在使用xampp、postgresql和php（服务器端）以及html、js和CSS（客户端）编码

我的代码php代码是：

<?php 
    $db = new PDO('pgsql:host=localhost; port=5432; dbname=webmap101;', 'postgres','password');
    $sql = $db->query("SELECT id,name,image,web,category, ST_AsGeoJSON(geom,5) as geom FROM cdmx_attractions ORDER BY name");

    $features=[];
    while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
        $feature=['type'=>'Feature'];
        $feature['geometry']=$json_decode($row['geom']);
        unset($row['geom']);
        $feature['properties']=$row;
        array_push($features,$feature);
    }
    $featureCollection=['type'=>'FeatureCollection', 'Features'=>$features];
    echo json_encode($featureCollection);
?>

我已取消注释，但没有更改

extension=pdo_pgsql
extension=pdo_sqlite

我试过很多东西，但都没用——它起作用了

有人能帮我吗

非常感谢！！

Guillem

您不是在解析字符串，而是在解析已解析的对象：）

代码html：

}

所以，我应该更改：L.geoJSON（JSON.parse（response）为L.geoJSON（response）？？非常感谢Mike！@GuillemPuigcomerma=L.geoJSON（response，{pointToLayer:function（feature，latlng）不起作用。现在我有一个错误传单。js:8未捕获错误：无效的geoJSON对象。在function.geometryToLayer（传单。js:8）在e.addData（laople.js:8）在e.initialize（laople.js:7）在新e（laople.js:5）在Object.o.geoJSON（laople.js:8）在Object.success（map2.html:76）在i（jquery-2.2.4.min.js:2）在Object.fireWith[解析]（jquery-2.2.4.min.js:2）在z（jquery-2.2.2.4.min.js:4）在XMLHttpRequest.（jquery-2.2.2.4）我真的很感谢你的帮助，我很高兴desesperate@GuillemPuigcomerma您可以向我显示此json echo json_encode（$featureCollection）；您有一个错误，而不是$featur['geometry']=$json_decode（$row['geom']）将其放入$feature['geometry']=json_decode（$row['geometry']）如果您已经有了$feature，请尝试在console.log（response）的消息错误上方粘贴我再次在这里输入：
注意：未定义变量：json_decode在C:\xampp\htdocs\proyecto\load_attractions.php的第8行

致命错误：未捕获错误：函数名必须是C:\xampp\htdocs\proyecto\load_attractions.php:8堆栈跟踪：#0{main}在第8行的C:\xampp\htdocs\proyecto\load_attractions.php中抛出
对不起，请将其替换为$feature['geometry']=$json_decode（$row['geometry']）；这是$feature['geometry']=json_decode（$row['geometry']）；我试过使用$sign和不使用$sign。没有任何效果。我不明白为什么会发生这种情况。我认为这不是代码问题。因为我遵循了教程，但没有办法遵循他的系统设置。但是示例使用了xampp和postgresql。我可以向您发送文件吗？可能是我的设置有问题，我不知道

VM323:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.success (map2.html:76)
    at i (jquery-2.2.4.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.2.4.min.js:2)
    at z (jquery-2.2.4.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-2.2.4.min.js:4)

;extension=pdo_pgsql
extension=pdo_sqlite

extension=pdo_pgsql
extension=pdo_sqlite

var obj1 = JSON.parse('{"param1":0,...,"param2":false}');

var obj2 = {"param1":0,...,"param2":false};

<head>
    <meta charset="utf-8">
    <title>La Carte Interactive</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    <style>
        #header{
            height: 75px;
            background-color: darkgoldenrod;
        }
        #mapdiv {
            height: 650px;
            background-color: salmon;
        }
        #side_panel{
            height: 650px;
            background-color: beige;
        }
        #footer{
            height: 75px;
            background-color:darkgrey;
        }

        .attraction{
            margin-bottom: 5px;
        }

    </style>
</head>

<body>



    <div id="header" class="col-md-12"> 
        <h1 class="text-center">Benin</h1>


    </div>

    <div id="side_panel" class="col-md-3"> 
        <h1 class="text-center">Point d'Eau</h1>
       <!--  <button id="zoomToZocalo" class="form-control btn-primary">Zoom</button> -->
       <!-- <button id="btnBuffer" class="form-control btn-warning">Buffer</button> -->
    </div>

    <div id="mapdiv" class="col-md-9"></div>
    <div id="footer" class="col-md-12">
        <h4 id="map_coords" class="text-center">Latitude: 19.43278 Longitude: -99.1333 Zoom Level: 11></h4>
        <h4 class="text-center">&copy;2016 <a href="http://wwww.google.com"></a>Google</h4>
    </div>

    <script>
        var mymap = L.map('mapdiv')
        mymap.setView([19.43278, -99.1333], 11);

        var backgroundLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
        mymap.addLayer(backgroundLayer);

        //create a marker and add it to the map
        /* var zocaloMarker = L.marker([19.43278, -99.1333]);
        zocaloMarker.addTo(mymap).bindPopup("Zocalo"); //popup can take html
        //zocaloMarker.bindPopup("Zocalo"); */

        //adding AJAX FONCTION CONNECTED TO DB
        var lyrAttractions;
        $.ajax({url:'load_attractions.php', success:function(response){
            if (lyrAttractions) {mymap.removeLayer(lyrAttractions)};
            lyrAttractions=L.geoJSON(JSON.parse(response), {pointToLayer: function(feature, latlng) {
                    var str = "<button id='zoomTo" + feature.properties.name.replace(/ /g, '');
                    str += "' class='form-control btn btn-primary attraction'>";
                    str += feature.properties.name + "</button>";
                    $('#side_panel').append(str);

                    //add event handlers for each button
                    $("#zoomTo" + feature.properties.name.replace(/ /g, '')).click(function () {
                        mymap.setView([latlng.lat, latlng.lng], 17);
                    });

                    var str = "<h4>" + feature.properties.name + "</h4><hr>";
                    str += "<a href='" + feature.properties.web + "' target='blank'>";
                    str += "<img src='img/" + feature.properties.image + "' width='200px'>";
                    str += "</a>";
                    return L.marker(latlng).bindPopup(str);


                }})
            lyrAttractions.addTo(mymap);
            mymap.fitBounds(lyrAttractions.getBounds());
        }});


        mymap.on('mousemove', function(e){
            var str = "Latitude: " + e.latlng.lat.toFixed(5)+ "Longitude: " + e.latlng.lng.toFixed(5)+ "Zooom level: " + mymap.getZoom();
            $("#map_coords").html(str);
        });

        /* var bufferLayer;
        $("#btnBuffer").click(function(){
            if($("#btnBuffer").html() =='Buffer') {
                var bufferedAttractions = turf.buffer(geojsonLayer.toGeoJSON(), 1, { units: "miles" });
                bufferLayer = L.geoJSON(bufferedAttractions).addTo(mymap); //geoJSON converts into the correct format, before we've used AJAX
                $("#btnBuffer").html("Remove Buffer");
            } else {
                mymap.removeLayer(bufferLayer);
                $("#btnBuffer").html("Buffer");
            }
        }) */

    </script>

</body>

<?php 
    $db = new PDO('pgsql:host=localhost; port=5432; dbname=webmap101;', 'postgres','password');
    $sql = $db->query("SELECT id,name,image,web,category, ST_AsGeoJSON(geom,5) as geom FROM cdmx_attractions ORDER BY name");

    $features=[];
    while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
        $feature=['type'=>'Feature'];
        $feature['geometry']=$json_decode($row['geom']);
        unset($row['geom']);
        $feature['properties']=$row;
        array_push($features,$feature);
    }
    $featureCollection=['type'=>'FeatureCollection', 'Features'=>$features];
    echo json_encode($featureCollection);
?>

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "id": 1, "name": "Zocalo", "image": "portada.jpg", "web": "https:\/\/en.wikipedia.org\/wiki\/Z%C3%B3calo" }, "geometry": { "type": "Point", "coordinates": [ -99.133409190626764, 19.432698835750049 ] } },
{ "type": "Feature", "properties": { "id": 2, "name": "Museum of Anthropology", "image": "anthropology.jpg", "web": "https:\/\/en.wikipedia.org\/wiki\/National_Museum_of_Anthropology_(Mexico)" }, "geometry": { "type": "Point", "coordinates": [ -99.186322350435987, 19.426167975275984 ] } },
{ "type": "Feature", "properties": { "id": 3, "name": "Chapultepec Park", "image": "chapultepec.jpg", "web": "https:\/\/en.wikipedia.org\/wiki\/Chapultepec" }, "geometry": { "type": "Point", "coordinates": [ -99.186538764177541, 19.419330699425345 ] } },
{ "type": "Feature", "properties": { "id": 4, "name": "Coyoacan", "image": "coyoacan.jpg", "web": "https:\/\/en.wikipedia.org\/wiki\/Coyoac%C3%A1n" }, "geometry": { "type": "Point", "coordinates": [ -99.16938652669846, 19.360599286308908 ] } },
{ "type": "Feature", "properties": { "id": 5, "name": "Xochimilco", "image": "xochimilco.jpg", "web": "https:\/\/en.wikipedia.org\/wiki\/Xochimilco" }, "geometry": { "type": "Point", "coordinates": [ -99.10105213434575, 19.288539898884309 ] } },
{ "type": "Feature", "properties": { "id": 6, "name": "Palaciode Bella Arts", "image": "bellaarts.jpg", "web": "https:\/\/en.wikipedia.org\/wiki\/Palacio_de_Bellas_Artes" }, "geometry": { "type": "Point", "coordinates": [ -99.141254115633359, 19.435377742284864 ] } },
{ "type": "Feature", "properties": { "id": 7, "name": "Desierto de los leones", "image": "leones.jpg", "web": "https:\/\/en.wikipedia.org\/wiki\/Desierto_de_los_Leones_National_Park" }, "geometry": { "type": "Point", "coordinates": [ -99.311104535201409, 19.312817198661758 ] } }
]