Leafletjs 在控制按钮附近打开一个弹出窗口

Question

我正在使用Leafletjs 构建地图。在那张地图上，我有一个带有大量标记的图层。当用户单击标记时，我会删除全局图层并创建一个新图层，其中仅包含与单击的图层有某种关系的标记。

为了使用户能够返回到先例（完整）层，我生成了一个使用 easy-button plugin 创建的按钮

btnViewAll = L.easyButton(
    'fa-eye', //icon
    function(){
        ea_clearLayer(markersCluster);
        markersCluster.addTo(map);  
    },
    'title',
    ''
);
map.addControl(btnViewAll);

但用户通常看不到它。所以我想在这个按钮附近有一个临时弹出窗口告诉他们一些提示。 Popup 类需要一个 LatLng，但 Control class 没有 getLatLng() 方法。

这里是我想如何创建和关闭弹出窗口。但它不起作用：

var popup = L.popup()
        .setLatLng(btnViewAll.getPosition()) <---- HERE WHAT?
        .setContent("click me to return to all markers")
        .openOn(map);

setInterval(function() {
   popup.closePopup(); 
}, 1000);

//更新-----

花费大量时间后，我无法使用@iH8 方法将弹出窗口放置在固定位置，因为我的 openPopup() 必须在制作动画并移动已计算坐标的 map.fitBounds(latLng) 函数之后生成对于弹出窗口。使其工作的唯一方法是捕获结束 fitBounds() 事件。

我的工作是构建一个类似于经典传单弹出窗口的 div 并使用 .show() 生成它：

//build a popup content
pcontent='<strong>'+
            "Clicca sull'occhio per poter"+
                '<br/>'+
            'tornare a visualizzare'+
                '<br/>'+
            'tutte le aziende sulla mappa'+
        '</strong>';

//build the popup and appending it
$('#'+map_id).append(ea_custom_popup('popup-tips-viewall',pcontent));

//the popup function
function ea_custom_popup(_class,content){
    return '<div class="'+_class+'" >'+
            '<div class="leaflet-popup-content-wrapper">'+
                '<div class="leaflet-popup-content">'+
                    content+
                '</div>'+
            '</div>'+
            '<div class="leaflet-popup-tip-container">'+
                '<div class="leaflet-popup-tip"></div>'+
            '</div>'+
        '</div>';
}

以及显示和隐藏部分：

...
map.fitBounds(pbounds);

var $popup = $('.popup-tips-viewall');
if(! $popup.hasClass('one-time-viewed')){
    $popup.show();
    $popup.addClass('one-time-viewed');
    setInterval(function() {
        $popup.hide();
    }, 4000);
}
...

css:

.popup-tips-viewall {
    left: 38px;
    padding: 10px;
    position: relative;
    top: 133px;
    width: 201px;
    z-index: 1;
    opacity:1;
    pointer-events:none;
    overflow:hidden;
    display:none;
}

希望对你有用。或者有人可以告诉我正常的（leafletjs方式）。

Answer 1

这取决于您放置按钮的位置。如果您有该按钮的确切位置，您可以使用 L.Map 的containerPointToLatLng 函数来获取弹出窗口所需的坐标。更多转换方法见参考：http://leafletjs.com/reference.html#map-conversion-methods