大家好
我一直在研究 google map html，但在重新加载 map 作为我的复选框的操作时遇到一些困难。我只是想重新定位 map 。任何建议，将不胜感激。谢谢!
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
html, body{height: 90%;width: 90%;padding: 5px;margin: auto;}
#googleMap {height: 90%; width: 90%; padding: 5px; margin: auto;}
#left_check {position: absolute;left: 10%;}
#padded-left {position: absolute;padding-left: 1.4em;}
#right_check{float: right; }
#mid_check {text-align: center;margin-left: auto;margin-right: auto;}
#left_align {display: inline-block;text-align: left;}
</style>
<script type = "text/javascript"
src = "http://maps.googleapis.com/maps/api/js">
</script>
<script type = "text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'> </script>
<script type = "text/javascript">
$(document).ready(function() {
$('.location').click(function(){
$(".location").removeProp("checked");
$(this).prop("checked","checked");
});
$('#canada1').click(function() {
if ($('#canada1').is(':checked')) {
alert('Canada is checked');
var canadaPos = new google.maps.LatLng(58.1707, -97.6289);
map.setOptions({
center: canadaPos,
});
};
});
});
function initialize() {
var mapProperties =
{
// Center Map on specified Lat/Lng and set default zoom
center: { lat: 41.5, lng: -88},
zoom: 4
};
//creating the map object
var map = new google.maps.Map(document.getElementById("googleMap"), mapProperties);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap"> </div>
<ul style = "list-style-type:none">
<div id = "left_check">
<li>
<form>
<input type ="checkbox" name ="location" value ="united_states"> United States (domestic) <br>
<div id = "padded-left">
<input type ="checkbox" class ="location" value ="west_coast"> West <br>
<input type ="checkbox" class ="location" value ="central_us"> East <br>
<input type ="checkbox" class ="location" value ="east_coast"> Central
</div>
</form>
</li>
</div>
<div id = "right_check">
<li>
<form>
<input type ="checkbox" class ="location" value ="europe"> Europe <br>
<input type ="checkbox" class ="location" value ="africa"> Africa <br>
<input type ="checkbox" class ="location" value ="asia"> Asia <br>
<input type ="checkbox" class ="location" value ="australia"> Australia
</form>
</li>
</div>
<div id = "mid_check">
<div id = "left_align">
<li>
<form>
<input id ="canada1" type ="checkbox" class ="location" value ="canada"> Canada <br>
<input type ="checkbox" class ="location" value ="central_america"> Central America <br>
<input type ="checkbox" class ="location" value ="south_america"> South America <br>
<input type ="checkbox" class ="location" value ="south_america"> Oceanic
</form>
</li>
</div>
</div>
</ul>
</body>
</html> 最佳答案
您可以动态更改 map 的中心而无需重新加载:
var newPos = new google.maps.LatLng(lat, long);
map.setCenter(newPos);
map.panTo(newPos);
map.panBy(xpixel,ypixel);
map.panToBounds(newBounds);
这些是更改 map 中心的方法( documentation )
关于javascript - Google map API 根据复选框操作 jQuery 重新中心化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31749038/