隐藏/显示标记答案

【问题标题】：HIDE/SHOW Markers隐藏/显示标记
【发布时间】：2014-12-01 04:16:04
【问题描述】：

我正在开发一个有地图的网站，我正在使用传单。现在我将隐藏/显示我制作的标记。

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

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

下面的另一个是我在地图上标记时的代码。

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.在地图上添加一个标记 2.隐藏/显示地图中的标记 3.在运行时或尝试时实现。

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

【问题讨论】：

对不起，由于使用不当我已经更改了它，我希望有人能帮助我，因为我仍然对这部分有疑问。

标签： javascript html hide show leaflet

【解决方案1】：

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

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

然后，在地图的点击事件中，添加闭包函数：

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

【讨论】：

谢谢你的代码，我会试试这个，无论如何谢谢你的帮助。
我不知道，对吗？
它不工作，我现在不知道为什么。我在地图上放了一个标记，然后单击我的复选框，但标记不显示/隐藏

【解决方案2】：

.addTo(map) 应该可以工作。

但是，您可以使用 addLayer 和 removeLayer 来添加/删除标记：

var marker = new L.Marker(e.latlng,{icon: Icon1});
marker.bindPopup('<div>Hello World</div>');

//add the marker to the map
map.addLayer(marker);

//remove the marker from the map
map.removeLayer(marker);

我假设你已经创建了map

【讨论】：

是的，我确实已经创建了地图，希望对您有所帮助，非常感谢，我会在尝试后检查这个。但我希望它适用于我的目标，因为我的目标是标记过滤检查/未检查隐藏显示
我不知道它是如何工作的？我只想在一个复选框中启动此代码，以便在地图上放置的任何时候标记都会在我每次选中/取消选中时隐藏/显示
你能做jsfiddle吗？

【解决方案3】：

在某些情况下，我们可能会使用这种方法来隐藏标记。

marker._icon.style.display = 'none';

if (value._popup._isOpen)
{
  marker.closePopup();
}

隐藏后显示标记。

marker._icon.style.display = '';

【讨论】：