javascript - 从多个 JSON 文件中切换复选框选择标记

Question

我无法切换复选框选择上的标记。我试图在 stackoverflow 上找到答案，但找不到任何合适的答案。

我有 4 个带有坐标的 JSON 文件，并且我为不同的 json 文件制作了 4 个复选框，当我单击两个或多个复选框时，标记会出现，但当我取消选中标记时，标记不会消失。

我尝试使用 setMap(null) 函数，但收到错误“setMap 未定义”。

$(document).ready(function() {
    var map;
    var mapMarker;
    function initMap() {
    	map = new google.maps.Map(document.getElementById('map'), {
    		center: {lat: 22.844700, lng: 78.939206},
        	zoom: 12,
        	mapTypeId : google.maps.MapTypeId.ROADMAP,
        	disableDefaultUI: true,
        	styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
      	});
    	
    	function interio() {
    		$.getJSON('json1', function(data) {
    		   	for (var i = 0; i < data.feed.entry.length; i++) {
    		    	var merker = new google.maps.Marker({
    					position: new google.maps.LatLng(data.feed.entry[i].gsx$lat.$t,data.feed.entry[i].gsx$longitude.$t),
    		   			map: map,
    		   			icon: "images/interio-marker.png"
    		   		});
    			}
    		});
    	}
    	function lock() {
    		$.getJSON('json2', function(data) {
    	   		for (var i = 0; i < data.feed.entry.length; i++) {
    	    		var merker = new google.maps.Marker({
    					position: new google.maps.LatLng(data.feed.entry[i].gsx$lat.$t,data.feed.entry[i].gsx$longitude.$t),
    		   			map: map,
    	   				icon: "images/lock-marker-png.png"
    	   			});
    			}
    	   	});
    	}

    	function mhe() {
    		$.getJSON('json3', function(data) {
    		   	for (var i = 0; i < data.feed.entry.length; i++) {
    		    	var merker = new google.maps.Marker({
    					position: new google.maps.LatLng(data.feed.entry[i].gsx$lat.$t,data.feed.entry[i].gsx$longitude.$t),
    		   			map: map,
    		   			icon: "images/mhe-png.png"
    		   		});
    			}
    		});
    	}

    	function appliance() {
    		$.getJSON('json4', function(data) {
    		   	for (var i = 0; i < data.feed.entry.length; i++) {
    		    	var merker = new google.maps.Marker({
    					position: new google.maps.LatLng(data.feed.entry[i].gsx$latitude.$t,data.feed.entry[i].gsx$longitude.$t),
    		   			map: map,
    		   			icon: "images/appliance-marker.png"
    		   		});
    			}
    		});
    	}

        	//current location
    	if (navigator.geolocation) {
       		navigator.geolocation.getCurrentPosition(function(position) {
       			var pos = {
           		lat: position.coords.latitude,
           		lng: position.coords.longitude
       			};
       			var marker = new google.maps.Marker({
       				position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
       				map: map,
       				icon: 'images/blue.png'
       			});
       			map.setCenter(pos);
       		}, function() {
       			handleLocationError(true, infoWindow, map.getCenter());
       		});


       		$("input[name = 'mapButton']").on('click', function() {
       			if(($("#interio").is(':checked') === true) && ($("#lock").is(':checked') === true)) {
       				interio();
       				lock();
       			} else if (($("#interio").is(':checked') === true) && ($("#mhe").is(':checked') === true)) {
       				interio();
       				mhe();
       			} else if (($("#interio").is(':checked') === true) && ($("#appliance").is(':checked') === true)) {
       				interio();
       				appliance();
       			} else if (($("#interio").is(':checked') === true) && ($("#lock").is(':checked') === true) && ($("#mhe").is(':checked') === true)) {
       				interio();
       				lock();
       				mhe();
       			} else if (($("#interio").is(':checked') === true) && ($("#lock").is(':checked') === true) && ($("#appliance").is(':checked') === true)) {
       				interio();
       				lock();
       				appliance();
       			} else if(($("#interio").is(':checked') === true) && ($("#mhe").is(':checked') === true) && ($("#appliance").is(':checked') === true)) {
       				interio();
       				mhe();
       				appliance();
       			} else if (($("#interio").is(':checked') === true) && ($("#lock").is(':checked') === true) && ($("#mhe").is(':checked') === true) && ($("#appliance").is(':checked') === true)) {
       				interio();
       				lock();
       				mhe();
       				appliance();
       			}
       			
       		});

    	} else {
       		// Browser doesn't support Geolocation
       		handleLocationError(false, infoWindow, map.getCenter());
    	}

      	function handleLocationError(browserHasGeolocation, infoWindow, pos) {
     		infoWindow.setPosition(pos);
      		infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
    	}
    };

    google.maps.event.addDomListener(window, 'load', initMap);

});

html, body {
	margin: 0px;
	padding: 0px;
  background-color: black;
}

.row {
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}

.leftSidebar {
  margin-top: 30px;
  margin-left: 10px;
  padding: 0px;
  background-color: black;
}

.leftSidebar img {
  width: 250px;
  height: 120px;
}

.textLogo {
	margin-top: 80px;
  color: #EF3753;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  font-family: 'PT Serif', serif;
  line-height: 36px;
  text-shadow: 1px 1px 0px #D21F02;
}

.compLogo {
  color: #C4C4C4;
  margin-top: 80px;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  font-family: 'PT Serif', serif;
  line-height: 36px;
  text-shadow: 1px 1px 0px #cccccc;
}

.custom-button {
  background-color: #EF3753;
}

.custom-button:hover, .custom-button:focus {
  background-color: rgb(158, 34, 54);
}

#map {
    display:block;
    width:100%;
    height:700px;
  }

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EF3753;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:6.0em;
}

#ck-button label span {
    text-align: center;
    padding: 12px 0px;
    display: block;
}

#ck-button label input {
    position:absolute;
    left:-100px;
}

#ck-button input:hover + span {
    background-color:#9E2236;
}

#ck-button input:checked + span {
    background-color:#9E2236;
    color:#fff;
}

#ck-button input:checked:hover + span {
    background-color:#EF3753;
    color:#fff;
}

<div id="ck-button">
	<label>
	<input type="checkbox" name="mapButton" value="1" title="Godrej Interio" id="interio"><span><img src="images/interior.png" alt="Interio" checked></span>
	</label>
</div>
<div id="ck-button">
	<label>
	<input type="checkbox" name="mapButton" value="2" title="Godrej Lock" id="lock"><span><img src="images/lock.png"></span>
	</label>
</div>
<div id="ck-button">
	<label>
	<input type="checkbox" name="mapButton" value="3" title="Godrej Material Handling" id="mhe"><span><img src="images/Material-handling.png"></span>
	</label>
</div>
<div id="ck-button">
	<label>
	<input type="checkbox" name="mapButton" value="4" title="Godrej Appliances" id="appliance"><span><img src="images/appliance.png"></span>
	</label>
</div>

Answer 1

切换不应加载带有标记的文件，它应该只执行 setMap(map) 或 setMap(null)。

这是您正在寻找的效果的示例(我想)

所以，我测试了2个数据文件； 4. 看第 15 行，看第 32 行(开关)，由你决定

我的数据文件:

json1.txt

[{"lat": 50.0, "lng": 4.0},{"lat": 50.1, "lng": 4.0},{"lat": 50.2, "lng": 4.0},{"lat": 50.3, "lng": 4.0}]

json2.txt

[{"lat": 50.0, "lng": 4.2},{"lat": 50.1, "lng": 4.2},{"lat": 50.2, "lng": 4.2},{"lat": 50.3, "lng": 4.2}]

脚本，index.php:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var map;
var markerSets = [];  // this will be an array of arrays of markers
function initMap() {
  // create map
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(50.5, 4.5),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // load the markers
  loadMarkers('json1.txt', createMarkers);
  loadMarkers('json2.txt',  createMarkers);
  //loadMarkers('json3.txt',  createMarkers);
  //loadMarkers('json4.txt',  createMarkers);
}

function loadMarkers(url, successCallback) {
  // make the ajax call
  $.ajax({
    url: url,
    dataType: 'json',
    success: successCallback // so, this will be function createMarkers
  });

}
function createMarkers(locations) {
  // now, we look at the request url to get the class / icon / ...
  switch(this.url) {
    case 'json1.txt': 
      var icon = 'interio-marker.png'; 
      var className = 'json1';
      var index = 0;
      break;
    case 'json2.txt': 
      var icon = 'lock-marker-png.png'; 
      var className = 'json2';
      var index = 1;
      break;
  }
  markerSets[index] = [] ;  
  for(var i in locations) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
      icon: 'images/' + icon,
      title: 'Set: ' + index + ' - Class: ' + className + ' - item: ' + i,
      map: map
    });
    markerSets[index].push(marker);
  }
  // create checkbox
  $('#checkboxes').append('<input checked="checked" onclick="toggle(this, ' + index + ')" type="checkbox"> ' + className + '<br>');
}
function toggle(checkbox, index) {
  for(var i in markerSets[index]) {
    if(checkbox.checked) {
      markerSets[index][i].setMap(map);
    }
    else {
      markerSets[index][i].setMap(null);
    }
  }
}

google.maps.event.addDomListener(window, 'load', initMap);
</script>
<style>
#map {
  height: 400px;
}
</style>
<div id="map"></div>
<div id="checkboxes"></div>