Google Maps多边形显示/隐藏复选框 [英] Google Maps polygon show/hide toggle with checkbox
问题描述
我正在尝试使用复选框输入进行简单的多边形开/关切换，但是我无法使以下代码正常工作.我已经在Google上搜索并找到了一些解决方案，但是没有一个对我有用.
I'm trying to do a simple polygon on/off toggle using a checkbox input, but I was unable to make the following code works. I have searched on google and found some solutions but none of them have worked to me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>html, body, #map-canvas{height: 100%; margin: 0px; padding: 0px; height: 590px;} </style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function toggleLayer(firLayer,id)
{
if ($('#'+id).is(':checked')) {
firLayer.setMap(map);
}
else
{
firLayer.setMap(null);
}
}
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-14.886436490787712, -47.2685546875),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var firCTB = [
new google.maps.LatLng(1.03333333, -40.98333333),
new google.maps.LatLng(-2.00000000, -34.95000000),
new google.maps.LatLng(-0.10000000, -42.00000000),
new google.maps.LatLng(1.03333333, -40.98333333)
];
// Fir Ctb
drawCtb = new google.maps.Polygon({
path: firCTB,
strokeColor: '#FFAA00',
strokeOpacity: 0.8,
strokeWeight: 3,
fillOpacity: 0.1
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<input id="fir_curitiba" type="checkbox" onClick="toggleLayer(drawCtb,'fir_curitiba')" /> Mostrar FIR Curitiba
</body>
</html>
任何帮助将不胜感激，谢谢！
Any help will be appreciated, thanks!
推荐答案
我看到两个问题.首先，您似乎尚未包含jQuery，因此未定义$.另外，在toggleLayer(firLayer,id)内，您尝试使用不在范围内(不会定义)的map.
I see two problems. First it looks like you haven't included jQuery, so $ is not defined. Also, inside toggleLayer(firLayer,id), you are trying to use map which isn't in scope (won't be defined).
已更新:要解决第二个问题，您可以像这样移动map声明(已更新以显示完整的源代码).
Updated: To fix the second problem, you can move the map declaration like this (updated to show full source).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>html, body, #map-canvas{height: 100%; margin: 0px; padding: 0px; height: 590px;} </style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// Move map declaration
var map;
function toggleLayer(firLayer,id)
{
if ($('#'+id).is(':checked')) {
firLayer.setMap(map);
}
else
{
firLayer.setMap(null);
}
}
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-14.886436490787712, -47.2685546875),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// Set map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var firCTB = [
new google.maps.LatLng(1.03333333, -40.98333333),
new google.maps.LatLng(-2.00000000, -34.95000000),
new google.maps.LatLng(-0.10000000, -42.00000000),
new google.maps.LatLng(1.03333333, -40.98333333)
];
// Fir Ctb
drawCtb = new google.maps.Polygon({
path: firCTB,
strokeColor: '#FFAA00',
strokeOpacity: 0.8,
strokeWeight: 3,
fillOpacity: 0.1
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<input id="fir_curitiba" type="checkbox" onClick="toggleLayer(drawCtb,'fir_curitiba')" /> Mostrar FIR Curitiba
</body>
</html>
我希望这会有所帮助.
这篇关于Google Maps多边形显示/隐藏复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
