从多个JSON文件

时间:2015-11-21 06:11:53

标签: javascript jquery json google-maps google-maps-api-3

我无法在复选框选择上切换标记。我试图在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>

0 个答案:

没有答案