Question

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

L.marker（[33.767675，-84.537291]，{icon：orangeIcon}）。addTo（map）.bindPopup（＆＃34;弹出窗口的一堆动态html内容＆＃34;）;

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

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

我确实找到了这个例子（通过https://github.com/Leaflet/Leaflet/issues/947），但我的弹出窗口只停留在＆＃34; loading ...＆＃34;似乎永远不会加载网址：

    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请求有些问题。弹出窗口中填充了“失败：[对象对象]＆＃39;

    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数据库中。像这样：

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

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

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

然后您可以使用onEachFeature为每个功能调用该功能：

addSVG()

您可以看到此方法在功能上运行（虽然略有不同）fiddle here。每次单击标记时，它都会向tumblr API发送AJAX请求，并根据geoJSON中包含的帖子ID提取缩略图图像的URL。

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

单击时填充传单弹出窗口

2 个答案: