從地圖中刪除矩形

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

一個選項：

1. 定義點擊監聽
2. 檢查如果rectangle對象存在並且具有.setMap方法的範圍外的rectangle1變量。
3. 如果有，則將其地圖屬性設置爲null（矩形當前顯示），將其隱藏並將其設置爲空。
4. 如果它不存在，或者沒有.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"); 
    } 
}); 

代碼片斷：

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

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

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