百度地圖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);//畫多邊形  
	}
});
      			

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章