Question

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

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

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

Answer 1

我看到两个问题。首先看起来你没有包含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>

我希望这会有所帮助。

Google地图多边形显示/隐藏切换复选框

1 个答案: