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

1.引入接口

<script src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>

<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />  

2.给dom绑定id

<a class="start_draw">绘制区域</a>

<div id="map"></div>    

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 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', overlaycomplete);  
      			
$(".start_drow").click(function(){//新增区域
      				
	 $(this).html("重新绘制");
	if(overlays==null){
		drawingManager.open();   
		drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);//画多边形  
	}else{
		overlays = [];
		map.clearOverlays();
		drawingManager.open();
		drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);//画多边形  
	}
});
      			

猜你喜欢

转载自blog.csdn.net/qq_41756580/article/details/80970051