谷歌地图通过复选框更改样式

问题描述：

我尝试通过复选框动态更改谷歌地图的样式。某些控件的特征颜色，一些控件的可见性。我没有得到如何总结样式的功能，因为他们不是字符串。
下面是代码：谷歌地图通过复选框更改样式

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

答

各种问题：你不需要$（窗口）.load，也不是身体的onload，我不认为“地图” jQuery函数，也不是“搞定”功能是你想要的。另外，您的复选框有一个重复的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>

谢谢！接受，但我是新来的JavaScript，我想我不知道如何设置基于“chkLbl”的风格对象...所以地图无法加载。 – amberija

在这一点上，我建议你研究文档：对于JavaScript对象，请参阅http://www.w3schools.com/js/js_properties.asp;对于Google Map API选项，请参阅https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data.DataOptions。 – dhc

恩，没有注意到这一点，但它看起来像你的复选框的“价值”参数实际上属性列表。可能你想要什么没有（使用ID）或简单的字符串。属性列表需要在JavaScript代码中构建，而不是HTML。 – dhc

谷歌地图通过复选框更改样式

相关推荐