Googleマップはチェックボックスでスタイルを変更します

-1

Googleマップのスタイルをチェックボックスで動的に変更しようとしています。機能の一部の色、一部は可視性を制御します。私は文字列ではないので、スタイルの特徴をどのように集計するのか分かりません。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>

出典

2016-08-03 amberija

様々な問題：ここで
はコードですあなたは$（ウィンドウ）.LOAD、またボディのonloadを必要としない、と私は「マップ」jqueryの関数を考えていないにも「取得します」機能はあなたが望むものです。また、チェックボックスには重複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>

出典

2016-08-03 17:09:47 dhc

をありがとう！受け入れられましたが、私は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

Um、以前はこれを気付かなかったが、チェックボックスの "値"パラメータは実際にはプロパティリストのようだ。おそらくあなたが望むものは何もない（use id）か単純な文字列です。プロパティリストは、htmlではなくjavascriptコードで構築する必要があります。ありがとう、理解された。 – dhc

Googleマップはチェックボックスでスタイルを変更します

答えて

関連する問題