Question

我尝试通过复选框动态更改Google地图的样式。一些控制颜色的功能，一些控制可见性。我不知道如何总结样式的特征，因为它们不是字符串。
这是代码：

<!DOCTYPE html>
<html>
  <head>
    <title>JS Bin</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
    <script type="text/javascript">

      var map;
      function initialize() {
          var myLatLng = new google.maps.LatLng(50.450, 30.522);
          myOptions = {
              zoom: 5,
              center: myLatLng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'), myOptions)
      }

      //checkboxes operation
      $(window).load(function(){
      $(document).ready(function () {
          $('input[type=checkbox]').change(function () {
            var checked = $(this).prop('checked');
            var selected = $("input:checked").map(function(i,el){return el.value}).get();

            //Show in HTML result
            document.getElementById("SHOW").innerHTML = selected;
          });
      });
      });
    </script>
  </head>

  <body onload="initialize()">
    <div id="map-canvas" style="width:500px;height:300px"></div>
    Clear Labels<input type="checkbox" id="chkLbl" value='{"elementType": "labels", "stylers": [ { "visibility": "off" }]}'>
    <br>Clear Borders<input type="checkbox" id="chkBrd" value='featureType: "all",elementType:"geometry.stroke",stylers:[{ visibility:"on"}]'>
    <br>Change Water<input type="checkbox" id="chkBrd" value='{"featureType": "water", "stylers": [ { "visibility": "off" }]}'>

    <p id="SHOW"></p>
  </body>
</html>

Answer 1

各种问题：你不需要$（window）.load，也不需要body onload，我不认为“map”jquery函数和“get”函数都是你想要的。此外，您的复选框也有重复的ID。

请参阅Google地图的javascript界面以供处理： https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map

部分清理代码：

<!DOCTYPE html>
<html>
  <head>
    <title>JS Bin</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
    <script type="text/javascript">

      var map;
      function initialize() {
          var myLatLng = new google.maps.LatLng(50.450, 30.522);
          myOptions = {
              zoom: 5,
              center: myLatLng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'), myOptions)
      }

      function setMapStyle(id) {
            var selected = $('#'+id).prop('checked');
            // set your style object based on "chkLbl","chkBrd","chkH2O" and call map.setStyle();
            $('#SHOW').html(/* whatever you're trying to show here*/);
      }

      //checkboxes operation
      $(document).ready(function () {
          initialize();
          $('input[type=checkbox]').change(function () {
            setMapStyle($(this).attr('id');
          });
      });
    </script>
  </head>

  <body>
    <div id="map-canvas" style="width:500px;height:300px"></div>
    Clear Labels<input type="checkbox" id="chkLbl" value='{"elementType": "labels", "stylers": [ { "visibility": "off" }]}'>
    <br>Clear Borders<input type="checkbox" id="chkBrd" value='featureType: "all",elementType:"geometry.stroke",stylers:[{ visibility:"on"}]'>
    <br>Change Water<input type="checkbox" id="chkH2O" value='{"featureType": "water", "stylers": [ { "visibility": "off" }]}'>
    <p id="SHOW"></p>
  </body>
</html>

Google地图会通过复选框更改样式

1 个答案: