继续在 google 地图 v3 中绘制折线

Question

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

可以在 Google Maps web app 中转到自定义地图编辑器（菜单中的我的地图 -> 创建地图 -> 绘制）。然后创建一条多段线，右键单击最后一个点并 select 延长线（见下图）。

但我找不到对 google 地图 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>

继续在 google 地图 v3 中绘制折线

Continue drawing a polyline in google maps v3

javascript

google-maps

google-maps-api-3

google-maps-drawing