如何在传单上按类型删除特定标记？

Question

我有一个项目，使Webgis在地图上显示数据，并在复选框中显示数据或隐藏该数据。

我已经完成了google map版本的制作，但由于已付款，因此我会使用传单寻找免费版本。

但是我在传单上的复选框有问题，取消选中后，标记不会消失。

var date = new Date();
var year = date.getFullYear();

// Center of the map
var center = [-1.1329372, 120.0350916];

// Create the map
var map = L.map("map").setView(center, 5);

// Set up the Google Map Hybrib layer
L.tileLayer("http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}", {
  attribution:
"Map data @" +
year +
" Google for Dinas Kebersihan Lingkungan Hidup dan Pertamanan",
  maxZoom: 18
}).addTo(map);

// Call JSON
$(document).ready(function() {
  getUsers();
});

// Format Icon Leaflet
var customIcons = L.Icon.extend({});

var merahIcon = new customIcons({ iconUrl: "merah.png" }),
  biruIcon = new customIcons({ iconUrl: "biru.png" }),
  kuningIcon = new customIcons({ iconUrl: "kuning.png" });

var icons = {
  merah: merahIcon,
  biru: biruIcon,
  kuning: kuningIcon
};

// Marker Group
var markerGroups = {
  merah: [],
  biru: [],
  kuning: []
};

// Get Data
function getUsers() {
  $.getJSON("json.php", function(data) {
for (var i = 0; i < data.length; i++) {
  var location = new L.LatLng(data[i].latitude, data[i].longitude);
  var name = data[i].name;
  var description = data[i].description;
  var type = data[i].type;
  var marker = createMarker(location, name, description, type);
}
  });
}

// Create Marker
function createMarker(location, name, description, type) {
  var content = "<b>" + name + "</b> <br/>" + description;
  var marker = L.marker(location, { icon: icons[type] })
.bindPopup(content)
.addTo(map);

  if (!markerGroups[type]) markerGroups[type] = [];
  console.log(markerGroups[type]);
  markerGroups[type].push(marker);
  var html = "<b>" + name + "</b> <br/>" + address;

  return marker;
}

// Create Checkbox Button
function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (!marker.getVisible()) {
  marker.setVisible(true);
} else {
  marker.setVisible(false);
}
  }
}

#map {
  height: 600px;
}

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/leaflet.css"
/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div class="map_wrap">
  <div class="siderbarmap">
<ul>
  <input
    id="merahCheckbox"
    type="checkbox"
    onclick="toggleGroup('merah')"
    checked="checked"
    autocomplete="off"
  />
  <label>Merah</label
  ><br />
  <input
    id="biruCheckbox"
    type="checkbox"
    onclick="toggleGroup('biru')"
    checked="checked"
    autocomplete="off"
  />
  <label>Biru</label
  ><br />
  <input
    id="kuningCheckbox"
    type="checkbox"
    onclick="toggleGroup('kuning')"
    checked="checked"
    autocomplete="off"
  />
  <label>Kuning</label
  ><br />
</ul>
  </div>
  <div id="map"></div>
</div>

Answer 1

我找到了新方法，谢谢

function toggleGroup(type) {
			if ($('.leaflet-pane img[src="'+type+'.png"]').is(':hidden')){
      		$('.leaflet-pane img[src="'+type+'.png"]').show();
    		} else {
      		$('.leaflet-pane img[src="'+type+'.png"]').hide();
    		}
		}