隐藏/显示标记

HIDE/SHOW Markers

本文关键字：显示 隐藏      更新时间：2023-09-26

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

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

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.在运行时或我尝试时让它发生。

我什么都试过了，但还是什么都没发生。在复选框中调用我的隐藏/显示函数的正确做法是什么？

这里有一种方法：定义一个以标记为参数的函数，并使用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)
})

使用.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

在某些情况下，为了隐藏标记，我们可能会使用这种方法，可能是.

marker._icon.style.display = 'none';
if (value._popup._isOpen)
{
  marker.closePopup();
}

用于隐藏后显示标记。

marker._icon.style.display = '';
相关文章：