第二次单击时删除多边形

Remove Polygon On Second Click

本文关键字：多边形 删除 单击 第二次      更新时间：2023-09-26

当用户第一次点击标记时，我希望多边形出现。第二次单击时，多边形应该会消失。此代码适用于出现的部分，但不会从地图中删除多边形。每次单击都会使多边形变暗。

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>

尝试在if语句中移动新多边形。我认为，当你调用该函数时，它会生成一个新的triangle1实例，这就是为什么当你试图删除多边形时，它删除了"var-trigle1"的新实例（它还没有被绘制到地图上），而不是地图上的实例。（对不起英语）

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;
        }
    });

一个选项（从地图中删除矩形，略有修改…

  1. 在单击侦听器的范围之外定义triangle1变量
  2. 检查triangle1对象是否存在并且是否具有.setMap方法
  3. 如果是，请将其贴图属性设置为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>

相关文章：