Question

我正在尝试创建一个标记，在点击时创建一个矩形，然后在下一次单击时删除该矩形。矩形正确插入到地图中，但下次单击时不会删除它。我应该更改什么才能正确删除矩形？

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);
    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)});
var m1 = 1;
    marker1.addListener('click', function() {
        var rectangle1 = new google.maps.Rectangle({
            map: map,
            bounds: new google.maps.LatLngBounds (
                new google.maps.LatLng(37.778261, 126.98140242),
                new google.maps.LatLng(36.255123, 128.0)
            )
        }); 
        if (m1 % 2) {
            rectangle1.setMap(map);
        }
        else {
            rectangle1.setMap(null);
        }
        m1++;
    });

Answer 1

一个选项：

定义点击侦听器范围之外的rectangle1变量
检查rectangle对象是否存在且具有.setMap方法。
如果是，请将其地图属性设置为null（当前显示矩形），隐藏它，并将其设置为空。
如果它不存在，或者没有.setMap方法，请创建标记。

var rectangle1;
marker1.addListener('click', function(evt) {
  if (rectangle1 && rectangle1.setMap) {
    rectangle1.setMap(null);
    rectangle1 = null;
    console.log("marker 1 clicked, setMap(null)");
  } else {
    rectangle1 = new google.maps.Rectangle({
      map: map,
      bounds: new google.maps.LatLngBounds(
        new google.maps.LatLng(37.778261, 126.98140242),
        new google.maps.LatLng(36.255123, 128.0))
    });
    console.log("marker 1 clicked, create Rectangle");
  }
});

代码段

＆＃13;

var geocoder;
var map;

function initialize() {
  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);
  marker1 = new google.maps.Marker({
    map: map,
    title: "marker 1",
    position: new google.maps.LatLng(37.55020520861464, 126.98140242753904)
  });
  var rectangle1;
  marker1.addListener('click', function(evt) {
    if (rectangle1 && rectangle1.setMap) {
      rectangle1.setMap(null);
      rectangle1 = null;
      console.log("marker 1 clicked, setMap(null)");
    } else {
      rectangle1 = new google.maps.Rectangle({
        map: map,
        bounds: new google.maps.LatLngBounds(
          new google.maps.LatLng(37.778261, 126.98140242),
          new google.maps.LatLng(36.255123, 128.0))
      });
      console.log("marker 1 clicked, create Rectangle");
    }
  });

}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

从地图中删除矩形

1 个答案: