谷歌地图(绘图库) 常用API 和自己挖过的坑

最全文档 当然还是官方API为准

地图绘图 (google.maps.drawing.DrawingManager)参数

drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,//绘图工具开关
        drawingControlOptions: {
          position: ,//显示工具条在地图方位
          drawingModes: ['polygon', 'polyline','Rectangle','Marker','Circle'],
          //显示工具条上有哪些绘图模块（多边形,线条,矩形,'标点','圆'）
        },//绘图控件的显示选项。
        circleOptions: this.mapConfig.circleOptions,//画圆参数的配置        polygonOptions: this.mapConfig.polygonOptions,//画多边形的配置        polylineOptions: this.mapConfig.polylineOptions,//画线条的配置        rectangleOptions: this.mapConfig.rectangleOptions,//画矩形参数的配置      });

地图绘图监听事件

1. overlaycomplete 当用户完成绘制任意触发此事件。
   
2. circlecomplete   ·························圆
   
3. markercomplete ··························标记。
4. polygoncomplete  ························多边形。
   
5. polylinecomplete  ·························线条
   
6. rectanglecomplete  ·······················矩形。
   
   

google.maps.event.addListener(this.drawingManager, 'overlaycomplete', this.overlaycomplete);
 绘图中 如不需要特定绘图监听，大多使用overlaycomplete 来完成监听事件

地图绘图线条拖拽和绘制 (这里才是坑)

google.maps.event.addListener（this.drawingManager,'insert_at'function(e){}）; 
google.maps.event.addListener（this.drawingManager,'remove_at',function(e){}）; 
google.maps.event.addListener（this.drawingManager,'set_at',function(e){}）; 

但是无法获取监听的拖拽线条，因自己的疏忽才发现是需要通过，.getPath() 获取路径事件监听

let polygonOptions ={path:path,...optionStyle}
let x=new google.maps.Polyline(polygonOptions);

google.maps.event.addListener（x.getPath(),'insert_at'function(e){}）; 
google.maps.event.addListener（x.getPath(),'remove_at',function(e){}）; 
google.maps.event.addListener（x.getPath(),'set_at',function(e){}）; 
x.setMap(map);

地图绘制时，我们会记录下我们每一条绘制的线条 或者文字来做地图处理,这里还需要注意到,我们先要对于工具上使用的线条做处理

params.setMap(null);