继续在Google Maps v3中绘制折线

Question

是否可以使用Google的DrawingManager为现有折线打开绘图模式？

转到自定义地图编辑器（菜单中的“我的地图”->创建地图->绘制）时，可以在Google Maps网络应用中使用。 然后创建一条折线，右键单击最后一点，然后选择延伸线（请参见下图）。

但是我找不到与Google Maps API v3相同的方法。

Answer 1

将折线的editable -option设置为true ，并将点添加到折线路径

例：

• 单击该行可使该行可编辑
• 点击地图停止编辑
• 在顶点上单击鼠标右键，同时延长线会停止编辑

 function initMap() { var goo = google.maps, map = new goo.Map(document.getElementById('map'), {}), line = new goo.Polyline({ path: [ {lat: 37.772, lng: -122.214}, {lat: 21.291, lng: -157.821}, {lat: -18.142, lng: 178.431}, {lat: -27.467, lng: 153.027} ]}), bounds = new goo.LatLngBounds(); line.getPath().getArray().forEach(function(ll){ bounds.extend(ll); }); map.fitBounds(bounds); line.setMap(map); /** * click on the line makes the line editable * * click on the map stops editing * * rightclick on the vertex while extending the line stops editing * **/ goo.event.addListener(line,'click',function(e){ var line=this; //make the line editable this.setEditable(true); //stopediting on map-click goo.event.addListenerOnce(this.getMap(),'click',function(){ line.setEditable(false); }); //when a vertex has been clicked if(typeof e.vertex==='number'){ //when the first or last vertex has been clicked if(!e.vertex ||e.vertex===this.getPath().getLength()-1){ //when the first vertex has been clicked reverse the path to //be able do push a vertex if(e.vertex===0){ var p=this.getPath().getArray(); p.reverse(); this.setPath(p); } //push a vertex this.getPath().push(e.latLng) //observe the mousemove of the map to set the latLng of the last vertex var move=goo.event.addListener(this.getMap(),'mousemove',function(e){ line.getPath().setAt(line.getPath().getLength()-1,e.latLng) }); //stop editing on rightclick goo.event.addListenerOnce(this,'rightclick',function(){ goo.event.removeListener(move); this.setEditable(false); }); } } }); } 

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

 <script async defer src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script> <div id="map"></div>