百度地图api js绘制多边形使用方法

1.引入接口

 

2.给dom绑定id

绘制区域

    

 

3.编写js

 

var map = new BMap.Map("map",{enableMapClick:false});
				
var center = new BMap.Point(106.554413,29.557184);
			    
map.centerAndZoom(center,12);
map.enableScrollWheelZoom();//启用地图滚轮放大缩小  
map.addControl(new BMap.NavigationControl()); //向地图中添加缩放控件 
map.addControl(new BMap.ScaleControl());  //向地图中添加比例尺控件
			    
var overlays=[];
var polygon;//多边形覆盖物
var overlaycomplete = function(e){  
    overlays=[];
    overlays.push(e.overlay.ia);
    console.log(e);
}; 
			    
var styleOptions = {  
    strokeColor:"red",    //边线颜色。  
    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。  
    strokeWeight: 3,       //边线的宽度，以像素为单位。  
    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。  
    fillOpacity: 0.3,      //填充的透明度，取值范围0 - 1。  
    strokeStyle: 'solid' //边线的样式，solid或dashed。  
};
			    
var drawingManager = new BMapLib.DrawingManager(map, {  
	isOpen: false, //是否开启绘制模式  
	//enableDrawingTool: true, //是否显示工具栏  
	drawingToolOptions: {  
	    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置  
	    offset: new BMap.Size(5, 5), //偏离值  
	},  
	circleOptions: styleOptions, //圆的样式  
	polylineOptions: styleOptions, //线的样式  
	polygonOptions: styleOptions, //多边形的样式  
	rectangleOptions: styleOptions //矩形的样式  
});
			    
//添加鼠标绘制工具监听事件，用于获取绘制结果  
drawingManager.addEventListener('overlaycomplete', function(e){
    var point = e.overlay.getPath(),arr1 = [];
    point.forEach(function(d){
        arr1.push(new BMap.Point(d.lng,d.lat)); //获得区域数组
    });
    polygon = new BMap.Polygon(arr1); //画出区域
});  
      			
$(".start_drow").click(function(){//开启区域绘制状态
    drawingManager.open();   
    drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);//画多边形
});

$(".exit_drow").click(function(){//退出区域绘制状态
    drawingManager.close();
});


polygon.enableEditing(); //开启多边形编辑状态
polygon.disableEditing();//关闭多边形编辑状态


//开启图形编辑后，当图形改变时触发
polygon.addEventListener("lineupdate",function (e) {
    var point = polygon.getPath(),arr2 = [];
    point.forEach(function(d){
       arr2.push([d.lng,d.lat]);
    });
    position = JSON.stringify(arr2);
});