从MySQL获取数据到GeoJSON时,LeafletJS没有显示地图

时间:2014-07-04 07:29:00

标签: javascript php mysql leaflet

所以我可以通过这个Php查询从MySQL获取数据

while($row = mysql_fetch_assoc($dbquery)) {
$feature = array(
'type' => 'Feature', 
'geometry' => array(
'type' => 'Point',
'coordinates' => array((float)$row['lng'], (float)$row['lat'])
),
'properties' => array(
'pano' => $row['pano']
//Other fields here, end without a comma
)
);
array_push($geojson['features'], $feature);

当用json_encode($ geojson,JSON_NUMERIC_CHECK)回显数组时;结果是

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[25.726231,66.498966]},"properties":{"pano":"81_1_0.html"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[25.723139,66.50158]},"properties":{"pano":"81_1_0.html"}}]};

但是,当我试图将这些内容放入LeafletJS地图时,没有任何内容显示

var points = <?php echo json_encode($geojson, JSON_NUMERIC_CHECK); ?> ;
var geoJsonLayer = L.geoJson(points, {
    pointToLayer: function (feature, latlng) {
        var marker = L.circleMarker(latlng, geojsonMarkerOptions);

        marker.on('click', function (e) {
            var feature = e.target.feature;
            var content = '<iframe width="665" height="650" frameborder="0" src="/' + feature.properties.pano + '">';
            document.getElementById("event").innerHTML = content;

            if (selectedMarker != false) {
                selectedMarker.setStyle({
                    fillColor: "#ff7800"
                });
            }
            marker.setStyle({
                fillColor: "#000000"
            });
            selectedMarker = marker;
        });

        return marker;
    }
});
markers.addLayer(geoJsonLayer);

我在这里做错了什么?

2 个答案:

答案 0 :(得分:0)

请尝试以下方法: -

var bicycleRental = {

  "type": "FeatureCollection",
  "features":[{
      "type": "Feature",
      "properties": {
        "point_id": "m14885"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          101.52053833007812,
          3.065117257466733
        ]
      }
    }


L.geoJson(bicycleRental, {

                style: function (feature) {
                    return feature.properties && feature.properties.style;
                },

                onEachFeature: onEachFeature,

                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(latlng, {
                        radius: 1.5,
                        fillColor: "#ffffff",
                        color: "#000",
                        weight: 0.8,
                        opacity: 0.5,
                        fillOpacity: 0.5
                    });
                }
            }).addTo(map);

答案 1 :(得分:0)

你不应该做这样的事情

var points = JSON.parse(<?php echo json_encode($geojson, JSON_NUMERIC_CHECK); ?>);

否则points只是一个字符串。