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

// UPDATE -----

花了很多时间后，我不能用@ iH8 approch将弹出窗口放在固定位置，因为我的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

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

1 个答案: