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

Google Maps polygon show/hide toggle with checkbox

本文关键字：复选框 隐藏 多边形 显示 谷歌地图      更新时间：2023-09-26

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

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

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

我看到两个问题。首先，看起来您没有包含jQuery，所以没有定义$。此外，在toggleLayer(firLayer,id)中，您试图使用不在作用域中(不会定义)的map。

已更新:要修复第二个问题，您可以像这样移动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>
    <!-- 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>

相关文章：