使用传单标记簇从 ajax 更新标记答案

【问题标题】：Updating marker from ajax with a leaflet marker cluster使用传单标记簇从 ajax 更新标记
【发布时间】：2013-03-13 17:56:59
【问题描述】：

我想将地图与传单集成并使用 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 文件中更新标记。

问候阿德里安

【问题讨论】：

标签： ajax map leaflet markerclusterer geojson

【解决方案1】：

您可能需要在 PHP 代码中将 HTTP 响应的内容类型设置为 application/json（请参阅 https://stackoverflow.com/questions/267546/correct-http-header-for-json-file）。

问候，布莱恩

【讨论】：

【解决方案2】：

我已经用 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);

}

..就是这样。

【讨论】：