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，略有修改......

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

第二次单击时删除多边形

2 个答案: