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);//画多边形
}
});