谷歌地图通过复选框改变风格

Google Maps change style via checkboxes

本文关键字：改变 风格 复选框 谷歌地图      更新时间：2023-09-26

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

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

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

请参阅谷歌地图的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>
相关文章：