javascript — перенос данных GeoJSON в Leaflet с помощью вызова AJAX

Question

javascript — перенос данных GeoJSON в Leaflet с помощью вызова AJAX

Я новичок в Leaflet, и мне было интересно, как загрузить маркеры из базы данных MySQL на карту листовки. Как загрузить маркеры из MySQL, используя PHP и ajax?

.....{"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":[-122.340141,47.60894]},"properties":{"name":"Pan
Africa Market","address":"1521 1st Ave, Seattle,WA","type":"restaurant"}},.......

Код листовки:

<script>
var map = L.map('map').setView([47.6145, -122.3418], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

$.ajax({
type: "GET",
url: "./geojson.php",
dataType: "geojson",
success: function(response) {
L.geoJson(response, {
onEachFeature: onEachFeature
}).addTo(map);
}
}).error(function() {});function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.popupContent);
}</script>

Маркеры не отображаются на карте. Я старался type: "POST" Я также проверил консоль Chrome на наличие ошибок и не получил ни одного.

ОБНОВЛЕНО Вывод geojson.php:

{"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":[-122.340141,47.60894]},"properties":{"name":"Pan Africa Market","address":"1521 1st Ave, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.344391,47.61359]},"properties":{"name":"Buddha Thai & Bar","address":"2222 2nd Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.356445,47.624561]},"properties":{"name":"The Melting Pot","address":"14 Mercer St, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.337654,47.606365]},"properties":{"name":"Ipanema Grill","address":"1225 1st Ave, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.345673,47.612823]},"properties":{"name":"Sake House","address":"2230 1st Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.340363,47.605961]},"properties":{"name":"Crab Pot","address":"1301 Alaskan Way, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.345467,47.613976]},"properties":{"name":"Mama's Mexican Kitchen","address":"2234 2nd Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.326584,47.617214]},"properties":{"name":"Wingdome","address":"1416 E Olive Way, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.342834,47.610126]},"properties":{"name":"Piroshky Piroshky","address":"1908 Pike pl, Seattle, WA","type":"restaurant"}}]}

Наконец, я понял: пропущена строка в:

$feature = array(
'type' => 'Feature',)

1

ajax javascript leaflet mysql php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я подозреваю, что ошибка здесь: dataType: "geojson"

AJAX JQuery поддерживает эти значения для dataType: xml, json, script, а также html (от документация). Он попытается проанализировать ответ на основе этого, и «геойсон» не является значением, которое он знает или распознает. dataType Также не следует путать с contentType а также mimeTypeэто разные вещи.

Что вам просто нужно сделать, это изменить это на dataType: "json" так как файлы GeoJSON просто JSON.

Вы не получили никаких отзывов об ошибках, потому что в .error функция.

    $.ajax({
type: "GET",
url: "./geojson.php",
dataType: "json",
success: function(response) {
L.geoJson(response, {
onEachFeature: onEachFeature
}).addTo(map);
},
error: function(response) {
console.log(response);
}
}).error(function(response) { console.log(response) });

2