继续在Google地图中绘制多段线v3

Question

是否可以使用Google的DrawingManager为现有的多段线启用绘图模式？

当进入自定义地图编辑器（我的地图菜单 - >创建地图 - >绘图）时，有可能在Google Maps web app。然后创建一条折线，右键单击最后一个点并选择延长线（见下图）。

但我不能找到一种方法来做与谷歌地图api v3相同。

Answer 1

设置折线的editable - 选项来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>