第二次點擊刪除多邊形

Question

當用戶第一次點擊標記時，我想要一個多邊形出現。他們第二次點擊多邊形應該會消失。此代碼適用於顯示的部分，但不會從地圖中刪除多邊形。每次奇怪的點擊都會使多邊形變暗。

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」的新實例（它尚未被繪製到），而不是一個在地圖上。 （抱歉英文）

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

一個選項（從Removing Rectangle from Map，稍加修改...

1. 定義點擊收聽
2. 檢查的範圍之外triangle1變量如果triangle1對象存在並且有.setMap方法
3. 如果有，則將其地圖屬性設置爲null（該多邊形當前正在顯示），將其隱藏並將其設置爲空
4. 如果它不存在，或者沒有.setMap方法，請創建標記。

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>