Googleマップのチェックボックスを使用して各ポリゴンの表示を切り替えるにはどうすればよいですか？

-1

Googleマップに複数のポリゴンを表示し、各ポリゴンの表示を切り替えたいとします。複数のポリゴンとトグル機能を表示するコードを作成しましたが、マップは表示されますがトグル機能は機能しません。私はどこでミスをしていますか？Googleマップのチェックボックスを使用して各ポリゴンの表示を切り替えるにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Toggle Visibility</title> 
    <style> 
     html, body, #map-canvas { 
     height: 650px; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <!-- Include jQuery --> 
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 

    var map; 


     function toggleLayer(toggleLayer,id) 
     { 
      if ($('#'+id).is(':checked')) { 
       toggleLayer.setMap(map); 
      } 
      else 
      { 
       toggleLayer.setMap(null); 
      } 
     } 

    function initialize() { 
      var mapOptions = { 
       zoom: 11, 
       center: new google.maps.LatLng(41.8500,-87.9645), 
      }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var path1 = [ 
    [41.769007157585534,-88.20167541503906], 
    [41.76081263047197,-88.12236785888672], 
    [41.717517926019624,-88.19429397583008] 
]; 

    var path2 = [ 
    [41.88336502279732,-88.09249877929688], 
    [41.88157575821145,-88.12957763671875], 
    [41.84271080015277,-88.12408447265625], 
    [41.841431946284025,-88.08425903320312]]; 

var path3 = [ 
    [41.96051129429776,-88.12957763671875], 
    [41.93906275484857, -88.00048828125], 
    [41.884387437207835, -88.02314758300781], 
    [41.879275201550634, -88.07395935058594], 
    [41.948766559468574, -88.11172485351562]]; 

var path4 = [ 
    [41.80203073088394, -88.09730529785156], 
    [41.801006999656636, -88.07533264160156], 
    [41.74313962010849, -88.05301666259766]]; 

var path5 = [ 
    [41.901254912872794, -87.94418334960938], 
    [41.949277245116555, -87.92015075683594], 
    [41.93446570034958, -87.87895202636719], 
    [41.96459591213679, -87.82608032226562], 
    [41.9753167881278, -87.78968811035156], 
    [41.899721690058364, -87.83706665039062], 
    [41.937019660425264, -87.72239685058594], 
    [41.87569639323101, -87.63175964355469]]; 

var path6 = [ 
    [41.780016905285535, -87.95448303222656], 
    [41.83171182161546, -87.96066284179688], 
    [41.83273506215261, -87.94281005859375], 
    [41.81073178596061, -87.88925170898438], 
    [41.81226714359981, -87.78282165527344], 
    [41.87723019276536, -87.77114868164062], 
    [41.782577040867636, -87.74848937988281], 
    [41.77182378456081, -87.88581848144531], 
    [41.801006999656636, -87.9290771484375]]; 

var path7 = [ 
    [41.852173524388824, -87.62489318847656], 
    [41.70880422215806, -87.62283325195312], 
    [41.70829161455626, -88.0059814453125], 
    [41.74416427530836, -87.96821594238281], 
    [41.73545418490723, -87.91603088378906], 
    [41.735966575868716, -87.68051147460938], 
    [41.840920397579936, -87.67707824707031]]; 


    function newPolyLine(path) { 
    var polyLine = new google.maps.Polyline(new google.maps.Polygon({ 
    path:path.map(
     function(source, index, array) { 
      return new google.maps.LatLng(source[0], source[1]); 
     }), 
    // strokeColor:"FF0000", 
    // strokeOpacity:0, 
    // strokeWeight:3, 
    // //fillColor:"#94C11F", 
    // fillOpacity:0.5, 
    // clickable:false 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
       // fillOpacity: 0.1, 
    fillColor: '#ff987b', 
    fillOpacity: 0.35, 
    // name: 'Polygon 2', 
    map:map 
    })); 
    polyLine.setMap(map); 
    return polyLine; 
}; 

var multipoly1 = newPolyLine(path1); 
var multipoly2 = newPolyLine(path2); 
var multipoly3 = newPolyLine(path3); 
var multipoly4 = newPolyLine(path4); 
var multipoly5 = newPolyLine(path5); 
var multipoly6 = newPolyLine(path6); 
var multipoly7 = newPolyLine(path7); 
} 


google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    <input id="togglepoly1" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 1 
    <input id="togglepoly2" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 2 
    <input id="togglepoly3" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 3 
    <input id="togglepoly4" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 4 
    <input id="togglepoly5" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 5 
    <input id="togglepoly6" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 6 
    <input id="togglepoly7" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 7 
    </body> 
</html>

すべてのヘルプは大歓迎されます。前もって感謝します。

出典

2017-07-10 BKhanderia

あなたのフィドルはどちらも動作しません（どちらのマップも表示されません）、どちらもjavascriptエラーがあります。 – geocodezip

@geocodezip：今すぐご確認ください。できます。あなたが私の質問で私を助けることができるなら、それは素晴らしいでしょう。前もって感謝します。 – BKhanderia

私はいくつかの変更を加えて、これを動作させました。チェックボックスをクリックすると、multipoly1 -multipoly7が定義されていないためにエラーが発生しました。私はこれらのそれぞれについてグローバル変数を定義し、以前に定義した場所にそれらを設定することでこれを解決しました。

私もあなたのチェックボックスのためのHTMLコードは多少の誤差があったことに気づいた、彼らはすべての呼び出しました：

onClick="toggleLayer(multipoly1,'togglepoly1')"

を私は、次の変更を加えた：

<input id="togglepoly1" type="checkbox" checked="t" onClick="toggleLayer(multipoly1,'togglepoly1')" /> Polygon 1 
<input id="togglepoly2" type="checkbox" checked="t" onClick="toggleLayer(multipoly2,'togglepoly2')" /> Polygon 2 
<input id="togglepoly3" type="checkbox" checked="t" onClick="toggleLayer(multipoly3,'togglepoly3')" /> Polygon 3 
<input id="togglepoly4" type="checkbox" checked="t" onClick="toggleLayer(multipoly4,'togglepoly4')" /> Polygon 4 
<input id="togglepoly5" type="checkbox" checked="t" onClick="toggleLayer(multipoly5,'togglepoly5')" /> Polygon 5 
<input id="togglepoly6" type="checkbox" checked="t" onClick="toggleLayer(multipoly6,'togglepoly6')" /> Polygon 6 
<input id="togglepoly7" type="checkbox" checked="t" onClick="toggleLayer(multipoly7,'togglepoly7')" /> Polygon 7

はまた、私が使用されるロジックを変更しましたパスを定義するときに、ポリゴンを作成する関数内のパス上の各ポイントに対してlat、lngオブジェクトを作成するための特別なステップは必要ありません。

var path1 = [ 
    {lat: 41.769007157585534,lng: -88.20167541503906}, 
    {lat: 41.76081263047197,lng: -88.12236785888672}, 
    {lat: 41.717517926019624,lng: -88.19429397583008} 
    ];

ポリゴンの作成：あなたが説明するように、あなたはnewPolyLine機能の緯度、LNGオブジェクトを作成する必要はありませんパスを定義した場合

function newPolyLine(path) { 
var polyLine = new google.maps.Polygon({ 
paths: path, 
strokeColor: '#FF0000', 
strokeOpacity: 0.8, 
strokeWeight: 2, 
fillColor: '#FF0000', 
fillOpacity: 0.35 
}); 
polyLine.setMap(map); 
return polyLine;

は、あなただけのポリゴンにサンプルと同じ方法で作成することができますここに：

https://developers.google.com/maps/documentation/javascript/examples/polygon-simple?csw=1

私は下記リンクするJSFiddleでこの作業を持っています。あなたがフィドルを使用して、独自の入力を喜ばせるために必要になりますので、私は、セキュリティのための私のAPIキーを編集されていることをご承知おきください。

https://jsfiddle.net/9trd0pg2/1/

私はこれが役に立てば幸い！

出典

2017-07-13 16:23:19

これは完全に機能します！どうもありがとうございます！ :) – BKhanderia

Googleマップのチェックボックスを使用して各ポリゴンの表示を切り替えるにはどうすればよいですか？

答えて

関連する問題