单击时填充传单弹出窗口

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

L.marker([33.767675, -84.537291], {icon:orangeIcon}).addTo(map).bindPopup("弹出窗口的一堆动态html内容");

我有很多标记，其中有很多弹出内容，因此为了加快地图渲染/页面加载速度，我想使用基于 URL 的内容填充实际的弹出窗口，但仅在单击该标记时进行。

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

我确实找到了这个例子（通过https://github.com/Leaflet/Leaflet/issues/947 https://github.com/Leaflet/Leaflet/issues/947) ，但我的弹出窗口只是停留在“正在加载...”并且似乎从未加载网址：

    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 请求似乎出了问题。弹出窗口填充“FAIL: [object OBJECT]”

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

然后您可以使用 onEachFeature 来调用每个功能的函数：

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

您可以看到此方法正在运行（尽管略有不同）在这里摆弄 http://fiddle.jshell.net/nathansnider/w6ma3yzo/。每次单击标记时，都会向 tumblr API 发送 AJAX 请求，并根据 geoJSON 中包含的帖子 ID 提取缩略图的 URL。

如果您仍然无法让它工作，您应该通过 console.log 或您可以使用的任何调试方式检查您的 .get 或 .ajax 请求返回的内容（如果有的话）。服务器可能拒绝您的请求，或者 Leaflet 无法理解返回的数据。