百度地图画图

注意事项

百度采用的经纬度坐标系国内BD-09 ，国外WGS-84

开发流程

初始化地图

var map = new BMap.Map("myMap");
map.enableDragging();
map.enableScrollWheelZoom(true);
var pt = new BMap.Point(116.404, 39.915);
map.centerAndZoom(pt, 10);
var points = [];//存储图形的点
var markers = [];//存储多边形端点坐标
var circleMaker;//存储圆形圆心坐标
var overArea;//多边形或圆区域覆盖物
var distance;//圆的半径

画多边形
1.左点击，每次点击增加多边形的一个点，并画对应的多边形到地图上
2.右点击，转化为修改多边形模式，为多边形每个端点添加可拖拽坐标，通过移动坐标来修改多边形该点位置，重新画多边形。显示退出修改按钮，可以回到1继续增加端点。

function drawPolygon(op) {
	if(!op)  {//重新画
		points = [];
		markers = [];
		overArea = null;
		
	}else{//修改图形
		for(var i=0;i<markers.length;i++){//移除修改端点marker
			map.removeOverlay(markers[i]);
		}
	}
		var clickListener= function(e) {
			points[points.length] = e.point;
			map.removeOverlay(overArea);
			overArea = new BMap.Polygon(points, styleOptions);
			map.addOverlay(overArea);

		};//var clickListener= function(e)
		map.addEventListener("click",clickListener);//点击地图添加多边形端点

		map.addEventListener("rightclick", function(e) { //右击修改图形
			this.removeEventListener('click',clickListener);//移除左点击事件
			var myIcon = new BMap.Icon("./img/point.svg", new BMap.Size(16, 16));
			for(var i = 0; i < points.length; i++) {

				var marker = new BMap.Marker(points[i], {
					icon: myIcon
				}); // 创建标注
				map.addOverlay(marker); // 将标注添加到地图中
				marker.enableDragging();
				marker.addEventListener('dragend', function() {//移动端点结束重新绘画多边形
					points = [];
					for(var k = 0; k < markers.length; k++) {
						points[points.length] = markers[k].point;
					}
					map.removeOverlay(overArea);
					overArea = new BMap.Polygon(points, styleOptions);
					map.addOverlay(overArea);
				});//marker.addEventListener('dragend', function() 
				markers[markers.length] = marker;
			}//for(var i = 0; i < points.length; i++)
		});//map.addEventListener("rightclick",
	
}

画圆
1.左点击，第一次点击为圆心，第二次点击为圆心到该点距离，作为半径，并画对应的圆到地图上，继续点击地图只修改半径大小。
2.右点击，转化为修改图形模式，为圆心添加可拖拽坐标，通过移动坐标来修改该点位置来移动圆心，从而移动整个圆。显示退出修改按钮，可以回到1继续更改圆半径。

function getDistance(point1, point2) {
	var lat1 = point1.lat;
	var lng1 = point1.lng;
	var lat2 = point2.lat;
	var lng2 = point2.lng;
	var radLat1 = Rad(lat1);
	var radLat2 = Rad(lat2);
	var a = radLat1 - radLat2;
	var b = Rad(lng1) - Rad(lng2);
	var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
	s = s * 6378.137; // 地球半径，千米;
	s = Math.round(s * 10000) / 10000; //输出为公里
	s = Math.round(s * 1000) / 1; //单位修改为米,取整
	//s=s.toFixed(4);
	return s;
}
function drawCircle(op) {
	if(!op) {//重新画		
		points = [];
		markers = [];
		overArea = null;
		distance = 0;
	}else{
		map.removeOverlay(circleMaker);
	}
		var clickListener=function(e) {
			if(points.length == 0) {
				points[0] = e.point;//圆心
			} else {
				points[1] = e.point;
			}
			if(points.length == 2) {
				map.removeOverlay(overArea);				
				distance = getDistance(points[0], points[1]);//圆半径
				overArea = new BMap.Circle(points[0], distance, styleOptions);
				map.addOverlay(overArea);
			}

		};//var clickListener=function(e)
		map.addEventListener("click", clickListener);
		map.addEventListener('rightclick', function() {//右击修改圆
			this.addEventListener('click',clickListener);
			var myIcon = new BMap.Icon("./img/point.svg", new BMap.Size(16, 16));
			circleMaker = new BMap.Marker(points[0], {
				icon: myIcon
			}); // 创建标注
			circleMaker.enableDragging();
			map.addOverlay(circleMaker); // 将标注添加到地图中
			circleMaker.addEventListener('dragend', function(e) {//移动圆心
				points[0]=e.point;
				map.removeOverlay(overArea);
				overArea = new BMap.Circle(e.point, distance, styleOptions);
				map.addOverlay(overArea);
			});//circleMaker.addEventListener('dragend'

		});//map.addEventListener('rightclick', function() 

}

画地区边界

function drawCityArea(areaKey){//根据地区关键词获取该地区边界
			var bdary = new BMap.Boundary();
			bdary.get(areaKey, function(rs){       //获取行政区域
			map.clearOverlays();        //清除地图覆盖物       
			var count = rs.boundaries.length; //行政区域的点有多少个			
          	var pointArray = [];
			for (var i = 0; i < count; i++) {
				var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
				map.addOverlay(ply);  //添加覆盖物
				pointArray = pointArray.concat(ply.getPath());
			}    
			map.setViewport(pointArray);    //调整视野  
		});  //bdary.get(areaKey, function(rs)
	}

【参考文档】
百度地图开发平台