Haritadan Dikdörtgeni Çıkarma

Question

Tıklatımda bir dikdörtgen oluşturacak ve ardından bir sonraki tıklamadaki dikdörtgeni çıkaracak bir işaretçi oluşturmaya çalışıyorum. Dikdörtgen, haritaya doğru şekilde ekleniyor ancak bir sonraki tıklamada kaldırılmıyor. Dikdörtgenin doğru şekilde kaldırılmasını sağlamak için ne yapmalıyım?

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

Seçeneklerden biri:

1. tık dinleyici
2. onay rectangle nesne varsa ve bir .setMap yöntemi varsa kapsamı dışında rectangle1 değişken tanımlayın.
3. eğer varsa, harita özelliğini null'a (dikdörtgen şu anda görüntülenir) ayarlayın, gizleyin ve boş olarak ayarlayın.
4. yoksa ya da .setMap yöntemine sahip değilseniz, işaretleyiciyi oluşturun.

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

kod parçacığını:

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>