Question

最初にポリゴンを表示したいときにユーザーがマーカーをクリックすると、 2回目にポリゴンをクリックすると消えます。このコードは、表示されているパーツでうまく動作しますが、マップからポリゴンを削除しません。奇数回クリックするだけでポリゴンが暗くなります。

body onload="initMap()"> 
<p id="instructions"></p> 
<div id="map" style='overflow:hidden;height:500px;width:500px;'></div> 
<script type="text/javascript"> 
function initMap() { 
    var myOptions = {zoom:11,center:new google.maps.LatLng(37.55020520861464,126.98140242753904),mapTypeId: google.maps.MapTypeId.ROADMAP}; 
    map = new google.maps.Map(document.getElementById('map'), myOptions); 

    document.getElementById("myButton").addEventListener("click", function() { 
     initMarker(); 
     myTimer(); 
    }); 
} 
    function initMarker() { 
     var t1 = 1; 
    marker1 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.55020520861464,126.98140242753904)}); 
    marker2 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.558816, 126.908212)}); 
    marker3 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.580107, 127.056797)}); 
    marker4 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.446290, 126.862625)}); 
    marker5 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.435041, 126.999528)}); 
    marker6 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.522926, 126.853862)}); 

    marker1.addListener('click', function() { 
      var triangleCoords = [ 
     {lat: 37.550, lng: 123.9814}, 
     {lat: 18.466, lng: -66.118}, 
     {lat: 32.321, lng: -64.757}, 
     {lat: 25.774, lng: -80.190} 
     ]; 

     var triangle1 = new google.maps.Polygon({ 
      paths: triangleCoords, 
      strokeColor: 'FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35 
     }); 
     if (t1 == 1) { 
      triangle1.setMap(map); 
      t1 = 2; 
     } 
     else { 
      triangle1.setMap(null); 
      t1 = 1; 
     } 
    }); 
} 

</script> 
<div><button id="myButton">Start</button></div> 
<div id="timer"></div> 
<p id="explain"></p> 
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp' 
async defer ></script> 
</body> 

Answer 1

ifステートメント内で新しいポリゴンを移動してみてください。私はこれまでにtriangle1の新しいインスタンスを作成したときにその関数を呼び起こしたので、ポリゴンを削除しようとすると "var triangle1"という新しいインスタンスが削除されます（まだマップされていません）地図にある。 triangle1オブジェクトが存在する場合は、わずかに修正さRemoving Rectangle from Mapからオプションが（、

marker1.addListener('click', function() { 
      var triangleCoords = [ 
     {lat: 37.550, lng: 123.9814}, 
     {lat: 18.466, lng: -66.118}, 
     {lat: 32.321, lng: -64.757}, 
     {lat: 25.774, lng: -80.190} 
     ]; 


     if (t1 == 1) { 
      var triangle1 = new google.maps.Polygon({ 
      paths: triangleCoords, 
      strokeColor: 'FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35 
      }); 
      triangle1.setMap(map); 
      t1 = 2; 
     } 
     else { 
      triangle1.setMap(null); 
      t1 = 1; 
     } 
    }); 

Answer 2

ワン（英語について申し訳ありません）...

1. は、クリックリスナー
2. チェックの範囲外triangle1変数を定義します.setMapメソッドを持っています
3. もしそうなら、マッププロパティをnull（現在はポリゴンが表示されています）に設定し、非表示にしてヌルに設定してください。
4. 存在しない場合、または.setMapメソッドを持たない場合は、マーカーを作成します。あなたは[containsLocation方法]（https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocationを見てみたいことがあり

var map; 
 

 
function initMap() { 
 
    var myOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(37.55020520861464, 126.98140242753904), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map'), myOptions); 
 

 
    document.getElementById("myButton").addEventListener("click", function() { 
 
    initMarker(); 
 
    }); 
 
} 
 

 
function initMarker() { 
 
    marker1 = new google.maps.Marker({ 
 
    map: map, 
 
    title: "marker 1", 
 
    position: new google.maps.LatLng(37.55020520861464, 126.98140242753904) 
 
    }); 
 
    var triangle1; 
 
    marker1.addListener('click', function(evt) { 
 
    if (triangle1 && triangle1.setMap) { 
 
     triangle1.setMap(null); 
 
     triangle1 = null; 
 
    } else { 
 
     var triangleCoords = [{ 
 
     lat: 37.550, 
 
     lng: 123.9814 
 
     }, { 
 
     lat: 18.466, 
 
     lng: -66.118 
 
     }, { 
 
     lat: 32.321, 
 
     lng: -64.757 
 
     }, { 
 
     lat: 25.774, 
 
     lng: -80.190 
 
     }]; 
 

 
     triangle1 = new google.maps.Polygon({ 
 
     paths: triangleCoords, 
 
     strokeColor: 'FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     map: map 
 
     }); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div> 
 
    <button id="myButton">Start</button> 
 
</div> 
 
<div id="timer"></div> 
 
<p id="explain"></p> 
 
<div id="map"></div>