Блог

Главная - Вопросы по программированию - LeafletJS не показывает карту при получении данных в GeoJSON из MySQL

LeafletJS не показывает карту при получении данных в GeoJSON из MySQL

#javascript #php #mysql #leaflet

#javascript #php #mysql #брошюра

Вопрос:

Итак, я могу получить данные из MySQL с помощью этого Php-запроса

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

Что я здесь делаю не так?

Комментарии:

1. выдает ли это какую-либо ошибку в консоли?

2. @Khushboo В консоли нет ошибок или чего-либо еще

3. что есть в geojsonMarkerOptions?

4. L.Geojson — это уже группа маркеров, поэтому вам не нужно добавлять ее на другой слой. добавьте это на карту напрямую

Ответ №1:

Попробуйте ниже :-

 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 amp;amp; 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. Он работает с фиксированным файлом GeoJSON. Возможно ли, что php-скрипт, который получает данные из базы данных, нарушает html-файл или что-то в этомроде?

2. попробуйте поместить ваш результат geojson напрямую. Тогда это работает?

3. Нет, «Неперехваченная синтаксическая ошибка: неожиданный идентификатор» L.GeoJSON (bicycleRental, {

Ответ №2:

разве вы не должны делать что-то подобное

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

в противном случае points будет просто строка.