Google Mas 如何根据点击点位置画圆，然后可以删除这个圆

用svg实现<!DOCTYPE html>
<html><head>
  <title>JavaScript SVG Animation</title>

<body onload="init(); doAnim();"> 
  <svg width="800px" height="800px"  >
     <circle onclick=" this.parentNode.removeChild(this)" r="10" cx="100" cy="100" style="fill:green"/>
     <circle onclick="this.parentNode.removeChild(this)" r="10" cx="200" cy="200" style="fill:red"/>
  </svg>
</body>
</html>
试试这个。点击地点添加圆，点击删除button清楚所有的圆。不知道是不是你想要的效果。
也可以参考这两个帖子：
添加圆： http://stackoverflow.com/questions/15111403/google-maps-api-v3-change-circle-radius-by-click-event
删除圆： http://stackoverflow.com/questions/6539215/google-maps-v3-clearing-a-circle-made-from-polylines-off-the-map
<html>
<head>
<div id="map"></div>
<style media="screen, projection" type="text/css">
#map {
        width: 800px;
        height: 400px;
      }</style>
<script type="text/javascript">
    function removeCircles() {
        if (circles) {
            for (var idx = 0; idx < circles.length; idx++) {
                circles[idx].setMap(null);
            }
        }
        if (ers) {
            for (var idx = 0; idx < ers.length; idx++) {
                ers[idx].setMap(null);
            }
        }
    }
</script>
</head>
<body>
<div>
<input type="button" value="Remove all Circles" onclick="removeCircles();" />
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">
             var circle, map, pre_radius;
             function initialize() {
                 pre_radius = '60000';                 var mapCenter = new google.maps.LatLng(40, -74);                 map = new google.maps.Map(document.getElementById('map'), {
                     'zoom': 7,
                     'center': mapCenter,
                     'mapTypeId': google.maps.MapTypeId.ROADMAP
                 });                 // Add click event listenecal
                 calcRadius(60000);
             };             var circles = new Array();
             var ers = new Array();
             function calcRadius(radiusVal) {
                 pre_radius = radiusVal;
                 google.maps.event.addListener(map, "click", function (e) {                     var image = new google.maps.MarkerImage(
                         'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                          new google.maps.Size(40, 35),
                          new google.maps.Point(0, 0),
                          new google.maps.Point(20, 30)
                        );                     var shadow = new google.maps.MarkerImage(
                         'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                          new google.maps.Size(62, 35),
                          new google.maps.Point(0, 0),
                          new google.maps.Point(0, 35)
                        );                     var er = new google.maps.Marker({
                         draggable: true,
                         raiseOnDrag: false,
                         icon: image,
                         map: map,
                         position: e.latLng
                     });                     circle = new google.maps.Circle({
                         map: map,
                         radius: pre_radius,
                         fillColor: '#AA0000'
                     });                     console.log(circle);                     circle.bindTo('center', er, 'position');                     circles[circles.length] = circle;
                     ers[ers.length] = er;
                 });
             }             google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>
</html>
用这个吧，上面那个里面还夹杂了Marker的添加和删除，有些乱。这个更简单，就是circle本身
<html>
<head>
<div id="map"></div>
<style media="screen, projection" type="text/css">
#map {
        width: 800px;
        height: 400px;
      }</style>
<script type="text/javascript">
    function removeCircles() {
        if (circles) {
            for (var idx = 0; idx < circles.length; idx++) {
                circles[idx].setMap(null);
            }
        }
    }
</script>
</head>
<body>
<div>
<input type="button" value="Remove all Circles" onclick="removeCircles();" />
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">
             var circle, map, pre_radius;
             var circles = new Array();
             function initialize() {
                 pre_radius = '60000';                 var mapCenter = new google.maps.LatLng(40, -74);                 map = new google.maps.Map(document.getElementById('map'), {
                     'zoom': 7,
                     'center': mapCenter,
                     'mapTypeId': google.maps.MapTypeId.ROADMAP
                 });                 calcRadius(60000);
             }             function calcRadius(radiusVal) {
                 pre_radius = radiusVal;
                 google.maps.event.addListener(map, "click", function (e) {                     circle = new google.maps.Circle({
                         map: map,
                         radius: pre_radius,
                         fillColor: '#AA0000',
                         center: e.latLng
                     });                     console.log(circle);                     circles[circles.length] = circle;
                 });
             }             google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>
</html>

调试易

Google Mas 如何根据点击点位置画圆，然后可以删除这个圆

解决方案 »