Javascript 谷歌地图多边形显示/隐藏切换复选框_Javascript_Jquery_Maps_Toggle_Polygon

Javascript 谷歌地图多边形显示/隐藏切换复选框

javascript jquery maps

Javascript 谷歌地图多边形显示/隐藏切换复选框,javascript,jquery,maps,toggle,polygon,Javascript,Jquery,Maps,Toggle,Polygon,我正在尝试使用复选框输入进行简单的多边形开/关切换，但我无法使以下代码正常工作。我在谷歌上搜索并找到了一些解决方案，但没有一个对我有用 <!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

我正在尝试使用复选框输入进行简单的多边形开/关切换，但我无法使以下代码正常工作。我在谷歌上搜索并找到了一些解决方案，但没有一个对我有用

    <!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>


html，正文，#映射画布{高度：100%；边距：0px；填充：0px；高度：590px；}
功能切换层（第一层，id）
{
if（$（'#'+id.）.is（':checked'））{
Firllayer.setMap（map）；
}
其他的
{
Firllayer.setMap（空）；
}
}
函数初始化（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（-14.886436490787712，-47.2685546875），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var firCTB=[
新的google.maps.LatLng（1.03333，-40.98333），
新的google.maps.LatLng（-2.00000000，-34.95000000），
新的google.maps.LatLng（-0.10000000，-42.00000000），
新google.maps.LatLng（1.03333，-40.98333）
];
//杉木Ctb
drawCtb=新的google.maps.Polygon({
路径：firCTB，
strokeColor:“#FFAA00”，
笔划不透明度：0.8，
冲程重量：3，
填充不透明度：0.1
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
库里蒂巴莫斯特拉冷杉

任何帮助都将不胜感激，谢谢

我看到两个问题。首先，看起来您没有包含jQuery，因此没有定义

。另外，在

toggleLayer（firLayer，id）

中，您试图使用的

map

不在范围内（不会定义）

更新：要解决第二个问题，您可以像这样移动

map

声明（更新以显示完整的源代码）


html，正文，#映射画布{高度：100%；边距：0px；填充：0px；高度：590px；}
//移动地图声明
var映射；
功能切换层（第一层，id）
{
if（$（'#'+id.）.is（':checked'））{
Firllayer.setMap（map）；
}
其他的
{
Firllayer.setMap（空）；
}
}
函数初始化（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（-14.886436490787712，-47.2685546875），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
//集合图
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var firCTB=[
新的google.maps.LatLng（1.03333，-40.98333），
新的google.maps.LatLng（-2.00000000，-34.95000000），
新的google.maps.LatLng（-0.10000000，-42.00000000），
新google.maps.LatLng（1.03333，-40.98333）
];
//杉木Ctb
drawCtb=新的google.maps.Polygon({
路径：firCTB，
strokeColor:“#FFAA00”，
笔划不透明度：0.8，
冲程重量：3，
填充不透明度：0.1
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
库里蒂巴莫斯特拉冷杉

我希望这有帮助。

我发现两个问题。首先，看起来您没有包含jQuery，因此没有定义