Remove a circle object from a Google Map

问题

I have checked multiple similar posts on SO but haven't yet found the answer. I have a Google map app that when you Zoom in the marker changes from an icon to a circle. It works great. The Marker icon is replaced by the circle object. But, I also want it to work in reverse: As you zoom out, I want to remove the circle and replace it with the icon. I can get the icon to "reappear" but I can't figure out a way to get a reference to the circle object that is bound to the Marker so I can remove it.

This is NOT the complete code that I am using but to satisfy the request for something MINIMAL rather than complete, this would create the issue:

var marker;
createamarker();
removeCircle();

function createamarker(){

        marker = new google.maps.Marker({
          position: location,
          map: map,
          icon: icon,
          // Add some custom properties
          obscure:obscure,
          originalpin: icon
        });

                // Add circle overlay and bind to marker
                var circle = new google.maps.Circle({
                  map: map,
                  radius: 1000,    //  in metres
                  fillColor: '#AA0000'
                });

                // Bind it to the marker

                circle.bindTo('center', marker, 'position');

 }

I also have a second function that is SUPPOSED to remove the circle:

function removeCircle(){
                // remove whatever is there
                marker.setMap(null);

                  var icon = {
                            url: marker.originalpin,
                            scaledSize: new google.maps.Size(22,32)
                        }
                // reset the marker icon 
                marker.icon = icon;

                //sets the marker back
                marker.setMap(map);

                // NOW REMOVE the circle:
                // So at this point I am stuck.  I have bound a circle to
                // the marker but in order to REMOVE the circle I need a 
                // reference to it.  Other SO postings suggest acting on the 
                // circle object directly like so:

                circle.setMap(null);

                // but the "circle" doesn't exist here. It was bound to the marker in another function.  I need a reference to the circle that was bound to the marker so I can act on it.
     }

回答1:

To do what you are looking to do, one option would be to set the circle as a property of the marker:

marker.circle = circle;

Then you can hide the circle like this:

marker.circle.setMap(null); 

Note that this won't work if the circle is global, it needs to be local to the createamarker function.

proof of concept fiddle

code snippet:

var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = createamarker(map.getCenter());
  removeCircle(marker);
  var marker2 = createamarker(new google.maps.LatLng(37.45, -122.14));

  google.maps.event.addDomListener(document.getElementById('toggle'), 'click', function() {
    marker.circle.setMap(marker.circle.getMap() == null ? map : null);
    marker2.circle.setMap(marker2.circle.getMap() == null ? map : null);
  });
}
google.maps.event.addDomListener(window, "load", initialize);


function createamarker(location) {
  var icon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
  marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: icon,
    // Add some custom properties
    // obscure: obscure,
    originalpin: icon
  });

  // Add circle overlay and bind to marker
  var circle = new google.maps.Circle({
    map: map,
    radius: 1000, //  in metres
    fillColor: '#AA0000'
  });

  // Bind it to the marker

  circle.bindTo('center', marker, 'position');
  marker.circle = circle;
  return marker;
}

function removeCircle(marker) {
  // remove whatever is there
  marker.setMap(null);

  var icon = {
    url: marker.originalpin,
    scaledSize: new google.maps.Size(22, 32)
  }
  // reset the marker icon 
  marker.icon = icon;

  //sets the marker back
  marker.setMap(map);

  // NOW REMOVE the circle:
  // So at this point I am stuck.  I have bound a circle to
  // the marker but in order to REMOVE the circle I need a 
  // reference to it.  Other SO postings suggest acting on the 
  // circle object directly like so:

  marker.circle.setMap(null);

  // but the "circle" doesn't exist here. It was bound to the marker in another function.  I need a reference to the circle that was bound to the marker so I can act on it.
}

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" value="toggle circle" id="toggle" />
<div id="map_canvas"></div>

来源：https://stackoverflow.com/questions/42299598/remove-a-circle-object-from-a-google-map