javascript - 隐藏/显示标记

标签 javascript html hide show leaflet

我正在开发一个具有映射的网站,并且我正在使用传单。现在我将隐藏/显示我制作的标记。

下面是我的代码,查找我想要的图像并将其用作标记

var Icon1 = L.icon({
    iconUrl: 'legends/fire.GIF',
     iconSize:     [170, 120], // size of the icon
    iconAnchor:   [100, 120], // point of the icon which will correspond to marker's location
    popupAnchor:  [-7, -80] // point from which the popup should open relative to the iconAnchor

下面的另一段是我在 map 上放置标记时的代码。

function mark()
{
if (select1.value === "Fire"){
var note = document.getElementById('note');
var datepick = document.getElementById('demo1');
var timepick = document.getElementById('timepick');
        map.on('click', function(e){
        var marker = new L.Marker(e.latlng,{icon: Icon1});
        marker.bindPopup("</a><br><strong>FIRE</strong></br><strong>Date:</strong>"+datepick.value+"</br><strong>Time:</strong>"+timepick.value+"</br><strong>Address:</strong>"+note.value+"<strong><br><strong>Suspect Sketch</strong><br><a href=legends/suspect.jpg rel=lightbox><img src = legends/suspect.jpg height=100 width = 100/>").addTo(map);

        marker.on('dragend');
        });

这是我隐藏标记的代码。

script type="text/javascript">

function closure(marker){
var checkbox = document.getElementById("chbx")

   $(chbx).click(function(){
      if(map.hasLayer(marker)){
        window.alert("I want to hide the marker");
      }
      window.alert("I want to show the marker");
   })
}
</script>

这正是我想要的。 1.在 map 上添加标记 2.隐藏/显示 map 中的标记 3.在运行时或尝试时使其发生。

我尝试了一切,但仍然没有任何反应。 在复选框中调用隐藏/显示函数的正确做法是什么?

最佳答案

这是一种方法: 定义一个以标记为参数的函数,并使用 jQuery 创建一个函数来切换图层的可见性:

function closure(marker){
   $('#yourcheckbox id').click(function(){
      if(map.hasLayer(marker)){
         map.removeLayer(marker)
      }
      else {map.addLayer(marker)}
   })
}

然后,在 map 的点击事件内部,添加闭包函数:

map.on('click', function(e){
    marker = new L.Marker(e.latlng).addTo(map);
    closure (marker)
})

关于javascript - 隐藏/显示标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26224109/

相关文章:

javascript - 如何去掉javascript中最后一个逗号?

javascript - 下拉菜单的change事件无法触发

javascript - JQuery/JavaScript 隐藏一个单击的元素,但不隐藏其他元素

android - 是否可以隐藏从应用程序调用的号码?

javascript - 我应该在 Jasmine 中为什么编写单元测试?

javascript - Node.js 中的 +new Date 语法是什么

javascript - CryptoJS.enc.Base64.stringify() 和普通 Base64 加密的区别

css - 在 bootstrap 中定位 div

javascript - 我的 CSS 值不反射(reflect)我的 JavaScript 中的值

Jquery 切换不工作