第二次点击删除多边形

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>