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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

从Google地图中删除圆形对象

1 个答案: