Question

我一直在努力寻找这个基本问题的解决方案而没有任何成功。

document.addEventListener('DOMContentLoaded', function () {
  showMap()
})
var map;
function showMap() {
        map = L.map('mapid').setView([45.508991, -73.568602], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
          maxZoom: 12,
          id: 'mapbox.streets',
          accessToken: 'sk.eyJ1IjoidGlydmF4IiwiYSI6ImNqNWJ3cHdnazAzeDUyd25xMThzZXc0b3kifQ.NRP_9hz5G4k0xQAwIje5bw'
        }).addTo(map);
        var marker = L.marker([45.508991, -73.568602]).addTo(map);
        marker.bindPopup("<b>Batiment PK</b><br>Depart</br>").openPopup();
}
function onEachFeature(feature, layer) {
        var coords = feature.geometry.coordinates;
        //window.alert(coords);
        var markerLocation = new L.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
        var marker1 = L.marker(markerLocation);
        map.addLayer(marker1);


}
function printLocationOnMap(location){
    var loc = JSON.parse(location);

    L.geoJson(loc, {
        onEachFeature : onEachFeature
    }).addTo(map)
}
function search(debut, fin, rayon) {
   var url = "http://localhost:8080//activites-375e?du=" + debut + "&au=" + fin + "&rayon=" + rayon + "&lat=45.508991&lng=-73.568602";
    var client = new XMLHttpRequest();
    client.open("GET", url, false);
    client.setRequestHeader("Accept", "text/json");
    client.send(null);
    if (client.status == 200){
        printLocationOnMap(client.responseText);
    }
    else{
        alert("Oups, ça n'a pas fonctionner. \n statut : " + client.status + " " + client.statusText + "\n");
    }
    return false;
}

printLocationOnMap中的参数位置是geoJson。（它是valide和巨大但这里是一个样本）：

{"features":[{"geometry":{"coordinates":[45.48753749999999,-73.8837685],"type":"Point"},"type":"Feature","properties":{"name":"Parc","province": "blabla", ......}}],"type":"FeatureCollection"}

此代码可以正常运行。在函数showMap（）中，标记运行良好，也是弹出窗口。但是不可能使onEachFeature（）函数正常工作。我看到触摸传单css可能会起作用，所以我试过这个，但仍然没有工作......

实际上最令人沮丧的是，当函数printLocationOnMap（）完成时，我可以看到1/4秒的标记，但它们立即消失了。

有什么建议吗？

由于

Answer 1

使用XMLHttpRequest时似乎错过了回调实施步骤。请参阅How to get the response of XMLHttpRequest?
您提供的GeoJSON响应示例似乎在[latitude, longitude]中使用coordinates订单，而[longitude, latitude]符合GeoJSON规范。这可能是您必须在onEachFeature函数中构建新标记的原因，而在使用L.geoJSON时它应该已经自动完成。因为您的坐标顺序是相反的，所以标记是在南极洲而不是加拿大蒙特利尔的某处绘制的。
至于你的标记在消失前很短暂可见，确实非常奇怪，可能是由于你如何调用search函数。但是XMLHttpRequest（第1点）的错误使用也可能发挥作用。

Javascript - 未显示

1 个答案: