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