Polygon beim zweiten Klick entfernen

Question

Wenn der Benutzer das erste Mal auf den Marker klickt, erscheint ein Polygon. Das zweite Mal, wenn sie auf das Polygon klicken, sollte verschwinden. Dieser Code eignet sich für den erscheinenden Teil, entfernt das Polygon jedoch nicht aus der Karte. Jeder ungerade Klick macht das Polygon nur dunkler.

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

Versuchen Sie, das neue Polygon in der if-Anweisung zu verschieben. Ich denke, wann immer Sie diese Funktion aufrufen, wird eine neue Instanz von triangle1 erstellt. Wenn Sie also versuchen, ein Polygon zu entfernen, löscht es die neue Instanz von "var triangle1" (die noch nicht in der Map gezeichnet wurde) auf der Karte. (Sorry über die englische)

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

Eine Option (von Removing Rectangle from Map, leicht modifiziert ...

1. die triangle1 Variable außerhalb des Bereichs des Zuhörers Klick definieren
2. überprüfen, ob das Objekt vorhanden ist triangle1 und hat eine .setMap Methode
3. Wenn dies der Fall ist, legen Sie die map -Eigenschaft auf null (das Polygon wird derzeit angezeigt), verstecken Sie es und setzen Sie es auf null.
4. Wenn es nicht existiert oder keine .setMap-Methode hat, erstellen Sie den Marker.

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>