从Google地图中删除圆形对象 [英] Remove a circle object from a Google Map

问题描述

我在SO上检查了多个类似的帖子，但尚未找到答案.我有一个Google地图应用，当您放大标记时，它会从图标变为圆形.效果很好.标记图标将替换为圆形对象.但是，我也希望它可以反向工作:缩小时，我想删除圆圈，并用图标替换它.我可以使该图标重新出现"，但无法找到一种方法来获取对绑定到标记的圆形对象的引用，因此可以将其删除.

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.

这不是我正在使用的完整代码，但是为了满足对MINIMAL而不是完整内容的要求，这会造成问题:

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

推荐答案

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

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

请注意，如果圆是全局的，则此操作将无效，它必须位于createamarker函数的局部.

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

概念提琴证明

代码段:

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>

这篇关于从Google地图中删除圆形对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！