切换谷歌地图折线和多边形之间

根据这个stackoverflow答案中的答案，我绘制了一个示例谷歌地图折线，如图所示。在这里，我试图在折线和多边形之间切换基于单选按钮。我尝试创建另一个多边形数组

 polygon= new goo.Polygon({
               paths: [],
               geodesic: true,
               strokeColor: '#FF0000',
               strokeOpacity: 1.0,
               strokeWeight: 2
           }),

并尝试在点击单选按钮时绘制地图，

if($("#polyline").is(":checked")) {
line.setMap(map);
} else {
polygon.setMap(map);
}

我还在每个事件中设置了适当的坐标polygon.getPaths()。但是它给出了一些错误信息。

代码片段(来自fiddle in comments):

var Line = [];
var polygon = [];
var Latlngs = [];
var Path;
function initMap() {
  var goo = google.maps;
  map = new goo.Map(document.getElementById('map'), {
    zoom: 10,
    center: new goo.LatLng(12.8799313333, 77.5991386667)
  });
  line = new goo.Polyline({
    path: [],
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
  polygon = new goo.Polygon({
    paths: [],
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
  markers = new goo.MVCArray;
  goo.event.addListener(map, 'click', function(e) {
    var marker = new goo.Marker({
      position: e.latLng,
      map: map,
      draggable: true
    });
    markers.push(marker);
    //push new point to the path
    line.getPath().push(marker.getPosition());
    polygon.getPaths().push(marker.getPosition());
    goo.event.addListener(marker, 'dragend', function() {
      //simply update the path
      line.getPath().setAt(markers.indexOf(this),
        this.getPosition());
      polygon.getPaths().setAt(markers.indexOf(this),
        this.getPosition());
    });
    goo.event.addListener(marker, 'dblclick', function() {
      //remove marker and path-point
      line.getPath().removeAt(markers.indexOf(this));
      polygon.getPaths().removeAt(markers.indexOf(this));
      markers.removeAt(markers.indexOf(this));
      this.setMap(null)
    });
  });
  $("radBut input").click(function() {
    if ($(this).id == "polygon") {
      polygon.setMap(map);
      line.setPath([]);
    } else {
      line.setMap(map);
      polygon.setPaths([]);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<script src="http://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="radBut">
  <input type="radio" name="poly" id='polyline' checked>Polyline</input>
  <input type="radio" name="poly" id='polygon'>Polygon</input>
</div>
<br/>
<div id="map"></div>

编辑:我已经添加了一个按钮来清除绘制的线/多边形

     $("#clear").click(function () {
       line.setPath([]);
       polygon.setPath([]);
       for (var i = markers.length; i > 0; i--) {
           markers.removeAt(i);
           markers.getArray()[i - 1].setMap(null);
       }
       Latlngs = [];
   });

一旦我清除了绘制的地图，如果我再次绘制另一条线并试图通过双击它来删除一个标记，则双击事件无法正常工作。小提琴在

UPDATE:上述编辑中的问题通过将标记重置为markers = new goo.MVCArray;来解决。