使用HTML和Leaflet中的复选框在地图中隐藏和显示标记 [英] Hide and Show Markers in Map using Checkbox in HTML and Leaflet

问题描述

我正在开发一个有映射的网站，我正在使用传单。现在我将隐藏/显示我做的标记。



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

I am developing a website that has a mapping and i am using leaflet. Now im on the part that i will hide /show markers that i made.

below is my code finding the image that i want and use it as a marker

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

下面的另一个是我的代码w hen将标记放在地图上。

the other one below is my code when putting the mark on the 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>FIRE</br>Date:"+datepick.value+"</br>Time:"+timepick.value+"</br>Address:"+note.value+"<br>Suspect Sketch<br><a href=legends/suspect.jpg rel=lightbox><img src = legends/suspect.jpg height=100 width = 100/>").addTo(map);

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

这是我隐藏标记的代码。

This is my code in hiding the marker.

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

这正是我想要的。 1.在地图上添加一个标记2.在地图中隐藏/显示标记3.在运行时或我尝试时发生这种情况。



我尝试一切都没有发生。在复选框中调用我的隐藏/显示功能的正确方法是什么？

This is just what i wanted. 1.Add A marker on the map 2.Hide/Show the marker in the map 3.Make this happen during run time or when i try it.

I try everything but still nothing happens. What is the right thing to do to call my hide/show function in checkbox?

推荐答案

（chbx）.click（函数（）{
if （map.hasLayer（marker））{
窗口 .alert（ 我想隐藏标记）;
}
window .alert（ 我想要显示标记）;
}）
}

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

这正是我想要的。 1.在地图上添加一个标记2.在地图中隐藏/显示标记3.在运行时或我尝试时发生这种情况。



我尝试一切都没有发生。在复选框中调用我的隐藏/显示功能的正确方法是什么？

This is just what i wanted. 1.Add A marker on the map 2.Hide/Show the marker in the map 3.Make this happen during run time or when i try it.

I try everything but still nothing happens. What is the right thing to do to call my hide/show function in checkbox?

这篇关于使用HTML和Leaflet中的复选框在地图中隐藏和显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！