Leaflet 单击“填充传单”弹出窗口

我目前正在传单地图上放置带有弹出窗口的标记，如下所示：

L.marker（[33.767675，-84.537291]，{icon:orangeIcon}）.addTo（map.bindpoppup（“弹出窗口的一组动态html内容”）

我有很多标记，有很多弹出内容，所以为了加快我的地图呈现/页面加载，我想用基于URL的内容填充实际的弹出内容，但只有在单击该标记时

关于如何做到这一点有什么想法吗

我确实找到了这个例子（通过），但我的弹出窗口只是停留在“加载…”位置，似乎从未加载url：

    var marker = L.marker([33.767675, -84.537291]).addTo(map);
    marker.bindPopup("Loading...");

    marker.on('click', function(e) {
            var popup = e.target.getPopup();
            var url="http://www.someurl.com/file.html";
            $.get(url).done(function(data) {
                popup.setContent(data);
                popup.update();
                });
            });

在考虑.get方法应该是.ajax时，我尝试了这个…但仍然没有成功：

    var marker = L.marker([33.767675, -84.537291]).addTo(map);
    marker.bindPopup("Loading...");

    function onMapClick(e) {
            var popup = e.target.getPopup();
            var url="http://www.r-stop.com";

            $.ajax({ 
                url:"http://www.r-stop.com/index.html"
            }).done(function( data ) {
                popup.setContent( data );
                popup.update();

                });

            };

    marker.on('click', onMapClick );

所以…编辑。。。。下面的代码可以工作，但返回.fail函数。 似乎我的$.ajax请求有问题。弹出窗口中填充了“失败：[对象]”

    var marker = L.marker([33.767675, -84.537291]).addTo(map);
    marker.bindPopup("Loading...");

    function onMapClick(e) {
            var popup = e.target.getPopup();


            $.ajax({
                url: "myfile.html",
                })
                .done(function( data ) {
                    popup.setContent( data );
                    popup.update();
                    })
                .fail(function( data ) {
                    popup.setContent( 'FAIL: ' + data );
                    popup.update();
                    });
            };

    marker.on('click', onMapClick );

---

我在过去这样做的方式是在单击之后，在发出AJAX请求之前创建一个虚拟弹出窗口。然后，一旦请求完成，关闭占位符，绑定真正的弹出窗口并打开它

我不知道它如何（甚至是否）适用于您描述的简单标记对象，因为我只尝试过与L.geoJson层结合使用。该方法的便利之处在于，它让您可以访问onEachFeature，它允许您调用函数，根据geoJSON对象的属性动态地设置样式

但是，当然，如果您有许多需要访问许多不同URL的标记，那么您可能还是希望将它们放入GeoJSON数据库中。大概是这样的：

var markerdata = {
"type": "FeatureCollection",
    "features": [{
    "type": "Feature",
        "geometry": {
        "type": "Point",
            "coordinates": [-84.537291, 33.767675, 0]
    },
        "properties": {
        "geometry": "Point",
            "name": "Test Marker 1",
            "url": "http://www.someurl.com/file_1.html"
    }
}, {
    "type": "Feature",
        "geometry": {
        "type": "Point",
            "coordinates": [-84.556685, 33.748580, 0]
    },
        "properties": {
        "geometry": "Point",
            "name": "Test Marker 2",
            "url": "http://www.someotherurl.com/file_2.html"
    }
}]
};

function onEachMarker(feature, layer) {

layer.on('click', function (e) {
    //destroy any old popups that might be attached
    if (layer._popup != undefined) {
        layer.unbindPopup();
    }
        var marker_url = feature.properties.url;

        //display a placeholder popup
        var pop = L.popup().setLatLng(this._latlng).setContent('Loading...').openOn(map);

        //request data and make a new popup when it's done
        $.ajax({
            url: marker_url,
            success: function (data) {
                    //close placeholder popup
                    layer.closePopup();

                    //attach the real popup and open it
                    layer.bindPopup(data);
                });
                layer.openPopup();
            }
        });
    });
}

要实际绑定弹出窗口，函数如下所示：

var markerdata = {
"type": "FeatureCollection",
    "features": [{
    "type": "Feature",
        "geometry": {
        "type": "Point",
            "coordinates": [-84.537291, 33.767675, 0]
    },
        "properties": {
        "geometry": "Point",
            "name": "Test Marker 1",
            "url": "http://www.someurl.com/file_1.html"
    }
}, {
    "type": "Feature",
        "geometry": {
        "type": "Point",
            "coordinates": [-84.556685, 33.748580, 0]
    },
        "properties": {
        "geometry": "Point",
            "name": "Test Marker 2",
            "url": "http://www.someotherurl.com/file_2.html"
    }
}]
};

function onEachMarker(feature, layer) {

layer.on('click', function (e) {
    //destroy any old popups that might be attached
    if (layer._popup != undefined) {
        layer.unbindPopup();
    }
        var marker_url = feature.properties.url;

        //display a placeholder popup
        var pop = L.popup().setLatLng(this._latlng).setContent('Loading...').openOn(map);

        //request data and make a new popup when it's done
        $.ajax({
            url: marker_url,
            success: function (data) {
                    //close placeholder popup
                    layer.closePopup();

                    //attach the real popup and open it
                    layer.bindPopup(data);
                });
                layer.openPopup();
            }
        });
    });
}

然后可以使用onEachFeature为每个功能调用函数：

//display markers on map
datalayer = L.geoJson(markerdata, {
    onEachFeature: onEachMarker
}).addTo(map);

您可以看到此方法在函数中工作（尽管略有不同）。这会在每次单击标记时向TumblrAPI发送一个AJAX请求，并根据geoJSON中包含的帖子ID提取缩略图的URL

---

如果您仍然无法让它工作，那么应该通过console.log或您可以使用的任何调试手段来检查.get或.ajax请求返回了什么（如果有）。可能是服务器拒绝了您的请求，或者传单无法理解返回的数据。

问题与我在ajax请求中调用的URL有关。 以下工作：

    var marker = L.marker([33.767675, -84.537291]).addTo(map);
    marker.bindPopup("Loading...");

    function onMapClick(e) {
            var popup = e.target.getPopup();


            $.ajax({
                url: "myurl.html",
                })
                .done(function( data ) {
                    alert( data );
                    popup.setContent( data );
                    popup.update();
                    })
                .fail(function( data ) {
                    alert( 'FAIL: ' + data );

                    });
            };

    marker.on('click', onMapClick );

---

谢谢你。有点过头了，但我会花些时间研究它。我感谢你的意见！数据是JSON对象吗？