0

マップをリーフレットと統合し、マーカーを ajax で更新したいと考えています。

私のマップは次のように作成されます:

<script type="text/javascript">




    var cloudmadeUrl = "http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png",
        cloudmadeAttribution = "Adrien",
        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
    latlng = new L.LatLng( 43.73357176247478,7.428388595581055);

    var map = new L.Map("map", {center: latlng, zoom: 11, layers: [cloudmade]});

        var geoJsonData = {
        "type": "FeatureCollection", 
        "features": [
            { "type": "Feature", "id":"1", "properties": { "address": "2"   }, "geometry": { "type": "Point", "coordinates": [7.428388595581055,43.73357176247478 ] } },
            { "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [7.358388595581055,43.73357176247478  ] } },
            { "type": "Feature", "id":"3", "properties": { "address": "21"  }, "geometry": { "type": "Point", "coordinates": [7.398388595581055,43.78357176247478 ] } },
            { "type": "Feature", "id":"4", "properties": { "address": "14"  }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963    ] } },
            { "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
            { "type": "Feature", "id":"6", "properties": { "address": "38"  }, "geometry": { "type": "Point", "coordinates": [175.2209942   ,-37.8192782833 ] } }
        ]
    };


    var markers = new L.MarkerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
document.getElementById("doit").onclick = function () {
        var m = markerList[Math.floor(Math.random() * markerList.length)];
        markers.zoomToShowLayer(m, function () {
            m.openPopup();
        });
    };
    }       

</script>

次のように見える geojson.php という名前のphpファイルを使用したい： 

$geodata='{
        "type": "FeatureCollection", 
        "features": [
            { "type": "Feature", "id":"1", "properties": { "address": "2"   }, "geometry": { "type": "Point", "coordinates": [7.428388595581055,43.73357176247478 ] } },
            { "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [7.358388595581055,43.73357176247478  ] } },
            { "type": "Feature", "id":"3", "properties": { "address": "21"  }, "geometry": { "type": "Point", "coordinates": [7.398388595581055,43.78357176247478 ] } },
            { "type": "Feature", "id":"4", "properties": { "address": "14"  }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963    ] } },
            { "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
            { "type": "Feature", "id":"6", "properties": { "address": "38"  }, "geometry": { "type": "Point", "coordinates": [175.2209942   ,-37.8192782833 ] } }
        ]
    };';
  echo $geodata ;
?>

https://github.com/calvinmetcalf/leaflet-ajaxを使用すると無効な geojson 形式になりますが、http://geojsonlint.com/ でテストすると正しいようです。ボタンをクリックして表示する特別なアイテムを選択するときに、php ファイルからマーカーを更新するというアイデアはありますか。

よろしくエイドリアン

4

2 に答える 2

0

application/jsonPHP コードでHTTP 応答の content-type を設定する必要がある場合があります ( https://stackoverflow.com/questions/267546/correct-http-header-for-json-fileを参照)。

よろしく、ブライアン

于 2013-04-02T00:16:36.453 に答える
0

私はcodeigniterでこれをやった.多分少し助けになる..

view.php

<link href="maps/dist/leaflet.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="maps/dist/leaflet.js"></script>
<script>

var map = L.map('map').setView([0, 0], 2);

//i use my own custom maps..
L.tileLayer( 'maps/srimaps/{z}/{x}/{y}.png', {minZoom: 1, maxZoom: 8, attribution: '', tms: true} ).addTo(map);

//when i click on a class named 'posisi', it gets Lat & Lng rows data from mysql table..
$( 'body' ).delegate( 'a.posisi', 'click', function()
{
    var data = {id:S(this).attr('id');      
    $.ajax({
        type: 'POST',
        url: 'index.php/plan/wip/posisi_item', //name of function in controller..
        dataType:'json',
        data:data,
        success: function( response ) 
        {   
                //for every array data..
                for( var i = 0; i < response.features.length; i ++)
                {
                    L.geoJson(response.features[i]).addTo(map).bindPopup("Item : "+response.features[i].properties.name+"<br>Qty : "+response.features[i].properties.comment);
                }   

        }
    });
});
</script>

..次にcontroller.php

function posisi_item()
{   
    $geojson = array( 'type' => 'FeatureCollection', 'features' => array() );

    $query=$this->db->query("SELECT * FROM stock_awal");
    foreach($query->result_array() as $row)
    {
        $feature = array( 'type' => 'Feature', 
                          'geometry' => array(
                                              'type' => 'Point',
                                              'coordinates' => array( (float)$row['lng'], (float)$row['lat'])),
                                              'properties' => array(
                                                                    'name' => $row['item'],
                                                                    'show_on_map'=>'true',
                                                                    'comment' => $row['qty'])
        );

        array_push($geojson['features'], $feature);
    }

    echo json_encode($geojson);

}

..それでおしまい。

于 2013-05-23T04:45:56.223 に答える