javascript - 添加图层时自动打开弹出窗口

标签 javascript leaflet

我有一条折线,当用户在图层控制菜单中选择折线图层时,需要自动打开一个弹出窗口。

This method did not work for me:

var polyline = L.geoJson(myData).bindPopup("<h1>Some Text goes here</h1>").openPopup();

如何实现自动弹出窗口?

这是我当前的设置:

var polyline = L.geoJson(myData).bindPopup("<h1>Some Text goes here</h1>");

var overlaysMenuCtrl = L.Control.extend({ ... blah blah... });

map.addControl(new overlaysMenuCtrl)());

我扩展了控件并添加了一个自定义函数来检查用户打开/关闭的图层:

function toggleLayer(checked, layer){
    if(checked){
        map.addLayer(layer);
    } else {
        map.removeLayer(layer);
    }
}

$(".check").change(function(){
    var layerClicked = $(this).attr("id");
//Turn layers on and off based on the ID of the radio checked
   switch(layerClicked){
    case "polyline": toggleLayer(this.checked, polyline);
    break;
    ...and other layers ...
    }
});

HTML:

<label><input id="polyline" type="checkbox" class="check">Polyline layer</label>

最佳答案

在您请求将图层添加到 map 的时刻与该图层实际位于 map 上/准备打开其弹出窗口的时刻之间很可能存在延迟。

您可以简单地添加一个事件监听器(使用 "add" 事件),每当将图层添加到 map 时,该监听器就会自动打开弹出窗口:

layer.on("add", function (event) {
  event.target.openPopup();
});

演示:https://jsfiddle.net/3v7hd2vx/101/ (使用图层控件将图层添加到 map )

关于javascript - 添加图层时自动打开弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39976971/

相关文章:

javascript - 动态创建多个复选框

javascript - JS作为Object单实例中的Array属性

javascript - .addOn 在此传单示例代码中如何工作/执行?

javascript - 如何使用传单制作中的addClass方法?

Leaflet - 根据缩放级别切换 GeoJSON

javascript - 删除 <a> 中不包含某个 "href"值的 <li> 元素

javascript - Dragula - 将元素从一个容器拖到不同的元素

javascript - IBM Worklight 6.1 - 如何显示提示对话框?

javascript - event.latLng 在 Leaflet 中未定义

javascript - Leaflet:隐藏/显示动态插入 map 中的标记