在第二次单击时删除多边形

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. 在点击侦听器范围之外定义triangle1 变量
2. 检查triangle1 对象是否存在并具有.setMap 方法。
3. 如果有，请将其 map 属性设置为 null（当前显示多边形），将其隐藏，并将其设置为 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>