单击时填充传单弹出窗口

Question

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

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

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

关于如何做到这一点的任何想法？

我确实找到了这个例子（通过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 );

所以...EDIT.... 下面的代码有效，但返回 .fail 函数。 似乎我的 $.ajax 请求有问题。弹出窗口填充了“失败：[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 );

Answer 1

问题实际上在于我使用 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 );

Answer 2

我过去这样做的方式是在点击后创建一个虚拟弹出窗口，就在发出 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);

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

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