可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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!

回答1:

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).

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 polygon show/hide toggle with checkbox

问题:

回答1: