从 Google 地图中删除圆形对象

Question

我在 SO 上查看了多个类似的帖子，但还没有找到答案。我有一个谷歌地图应用程序，当你放大标记时，它会从一个图标变为一个圆圈。它工作得很好。标记图标被圆形对象取代。但是，我也希望它反向工作：当你缩小时，我想删除圆圈并将其替换为图标。我可以让图标“重新出现”，但我想不出一种方法来获取对绑定到标记的圆形对象的引用，以便将其删除。

这不是我使用的完整代码，而是为了满足对 MINIMAL 而不是完整的请求，这会产生问题：

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

 }

我还有第二个功能是应该删除圆圈：

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.
     }

Answer 1

要做您想做的事情，一种选择是将circle 设置为标记的属性：

marker.circle = circle;

然后你可以像这样隐藏圆圈：

marker.circle.setMap(null); 

请注意，如果圆圈是全局的，这将不起作用，它需要是 createamarker 函数的本地。

proof of concept fiddle

代码 sn-p：

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>