Question

我是传单地图的新手。我试图在地图上显示一些标记，并在弹出窗口中显示每个标记的数据。

这是我的ajax调用，以获取标记。

var getLocations='/equipment/api/getLocations';
            $.ajax({
                url:getLocations,
                method:'get'
            }).done(function(response){
                var resultData = response.data.filters;
                $.each(resultData,function(i,value){
                    if((value.latitude!=0.0) || (value.longitude!=0.0)){
                        L.marker([value.latitude,value.longitude]).addTo(map).bindPopup("Popup Content");
                    }
                })
            });

这里有获取latlng值而且没有显示弹出窗口的问题。

这是获取弹出数据的方法。

var getData='/equipment/api/getPopupData';
            $.ajax({
                url:getData,
                method:'get'
            }).done(function(response){
                console.log(response)
            })

这里也是没有任何问题的弹出数据。

现在我的疑问是如何在相关标记中显示弹出数据？现在还有一件事我正在onclick标记中显示弹出窗口，但我想在onhover中显示它。谁能给我一些想法？谢谢！

Answer 1

如果我说得对，你想将弹出数据显示给特定标记吧？在getPopupData中的ajax响应之后，你可以像这样把信息放在bindPopup中（这是一个例子）：

var marker = new L.marker([value.latitude,value.longitude]).addTo(map).bindPopup("<a style='font-size:18px; font-style: italic; font-family:courier; cursor: pointer;'>" + varInfoFromGetPopupData + "</a>);

上面假设响应只是数据值，如果它是HTML结构，你可以这样做：

var marker = new L.marker([value.latitude,value.longitude]).addTo(map).bindPopup("'" + varInfoFromGetPopupData + "'");

如果没有，你能更具体一点吗？

和

要让弹出窗口打开 onhover ，您需要这样做：

marker.on('mouseover', function (e) { this.openPopup(); });

要关闭它，请使用 mouseout：

marker.on('mouseout', function (e) { this.closePopup(); });

我希望这对你有所帮助。

Answer 2

您似乎需要一种方法来连接两个数据集。该连接可能基于同时位于getLocations和getData结果中的字段。通过在gatData完成后运行getLocations ajax，您可以将位置数据与数据一起使用。这个代码块遵循两个ajax结果的顺序相同的假设（一个不好的假设，你可能在两个结果中都有一个id）。

var getLocations='/equipment/api/getLocations';
            $.ajax({
                url:getLocations,
                method:'get'
            }).done(function(response){
                var resultData = response.data.filters;

                var getData='/equipment/api/getPopupData';
                $.ajax({
                    url:getData,
                    method:'get'
                }).done(function(response){
                    console.log(response)
                    var markers_data = response 
                    $.each(resultData,function(i,value){
                        if((value.latitude!=0.0) || (value.longitude!=0.0)){
                            // Create the popup data if the response is in the same order as the markers_data
                            // If not use something like response[value.id]
                            var popup_data = markers_data[i] ? markers_data[i] : "no data"; 
                            L.marker([value.latitude,value.longitude]).addTo(map).bindPopup(popup_data);
                        }
                    })
                })                              
            });

如何从ajax方法显示传单弹出内容？

2 个答案: