Question

根据stackoverflow answer中的答案，我绘制了this fiddle中给出的示例谷歌地图折线。在这里，我试图根据单选按钮在折线和多边形之间切换。我试图将另一个多边形数组作为

 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）：

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 = [];
   });

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

更新：通过将标记重置为markers = new goo.MVCArray; given here来解决上述编辑中的问题。

Answer 1

我创建了一个工作小提琴here，您可以根据代码在折线和多边形之间切换。

我必须对您的代码进行一些更改才能使其正常工作：

我。使用多边形的IObservable<StockQuote> obs = Observable.FromEvent<QuoteUpdatedDelegate, StockQuote>( h => (_, sq) => h(sq), eh => _board.QuoteUpdated += eh, eh => _board.QuoteUpdated -= eh);属性而不是path II。将多边形对象的贴图设置为null，以停止在折线顶部渲染多边形（因为单选按钮设置为折线）

paths

III。改变从polygon = new goo.Polygon({ path: [], ... map: null });到polygon.getPaths().push(marker.getPosition());的代码行，因为我们现在正在使用路径属性（而不是路径）。

IV。更改dragend和dblclick事件处理程序以使用polygon.getPath().push(marker.getPosition());而不是polygon.getPath()：

polygon.getPaths()

IV。将goo.event.addListener(marker, 'dragend', function () { ... polygon.getPath().setAt(markers.indexOf(this), this.getPosition()); }); goo.event.addListener(marker, 'dblclick', function () { ... polygon.getPath().removeAt(markers.indexOf(this)); ... });事件处理程序修改为：

$("radBut input")

请注意，jQuery CSS选择器现在$("#radBut input").click( function() { if($(this).attr('id') == "polygon") { polygon.setMap(map); line.setMap(null); } else { line.setMap(map); polygon.setMap(null); } });而非$("#radBut input")，我们使用$("radBut input")来获取所选单选按钮的ID。此外，无需将折线或多边形路径设置为空数组（这将清除多边形或数组点）。而是使用$(this).attr('id')，它将从地图中删除折线或多边形，但保留数组中的点。

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

1 个答案: