Leafletjs，预定义标记，复选框

Question

我看到了Alexandru Pufan的回答，他回答另一个用户的另一个问题的例子就是我正在寻找的但没有map.on（＆＃39;点击＆＃39;）。

我想要实现的是使用预定义的标记，其位置与我的复选框进行通信。

<div id="topcontrol" style="height: 35px; background-color: #000000; bottom: 0px; position: inherit; width: 100%; padding-left: 10px;">
    <div id="layercontrol">
        <span class="layerbox">
            <input type="image" src="assets/citycon1.png" title="City" checked id="citybox" type="checkbox" value="         cityMarkers">
            <label class="labelbox" for="citybox"></label>
        </span>

上面是我制作的复选框。 下面是我为某个位置创建的标记。默认情况下，它应该被隐藏，直到被调用复选框并在用户再次点击后删除。

var cityMarkers = L.icon({
    iconUrl: 'assets/cityMarker.png',
    iconSize: [75, 50],
    iconAnchor: [38, 45],
});

L.marker([-17.726706, -42.099609],{
    icon: cityMarkers,
    draggable: false,
}).addTo(map); 

以下是Alexandru Pufan的例子： For example