利用百度地图绘制区域（限行区）

最近要搞一个平台要弄一个打卡范围。
然后想起来以前做过一个限行区的地图返回绘制。就去扒拉以前的代码。找出来了。然后来记录一下。

百度地图绘制图案官方文档: http://lbs.baidu.com/jsdemo.htm#f0_7.
首先是引入百度地图资源

<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=3.0&ak=0hT82pj7F8UQM9jkMEsVHeWn8rbN5XFn"></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" />
<!--加载检索信息窗口-->
<script type="text/javascript"
	src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet"
	href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />

然后定义一个div来放地图

<div id="allmap"
	style="min-width: 1200px; min-height: 800px; max-width: 100%; max-height: 100%;">
</div>

定义两个input标签来存放绘制之后生成的经纬度数组

<!-- 限行区域经度拼接字符串 -->
<input type="hidden" id="jdArray" name="jdArray" value="">
<!-- 限行区域纬度拼接字符串 -->
<input type="hidden" id="wdArray" name="wdArray" value="">

然后是百度地图的api

<script type="text/javascript">
	// 百度地图API功能
    var map = new BMap.Map('allmap');
    var poi = new BMap.Point(113.858543,34.041015);
    map.centerAndZoom(poi, 13);
    map.setCurrentCity("许昌" );
    map.enableScrollWheelZoom();
    var lngStr = ""; //经度拼接字符串
    var latStr = "";  //纬度拼接字符串
    var overlays = [];
	var overlaycomplete = function(e){
		//开启编辑模式（选中区域后可二次拖动）
		//e.overlay.enableEditing();
		
		var resArray = e.overlay.Sn;
		for(i = 0;i<resArray.length;i++){
			if(i<resArray.length-1){ //判断取到的内容是不是最后一个
				lngStr += resArray[i].lng + ",";
				latStr += resArray[i].lat + ",";
			}else{
				lngStr += resArray[i].lng;
				latStr += resArray[i].lat;
			}
		}
		 $("#jdArray").val(lngStr);
		 $("#wdArray").val(latStr);
		//console.log(lngStr)
		//console.log(latStr)
		
		//将多边形保存到数组
        overlays.push(e.overlay);  
    };
    
    
    var styleOptions = {
        strokeColor:"black",    //边线颜色。
        fillColor:"blue",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.5,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.2,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
        	drawingModes : [BMAP_DRAWING_POLYGON],
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //位置
            offset: new BMap.Size(700, 70), //偏离值
        },
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
    });  
	 //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);

    function clearAll() {
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }
	</script>

最下边的这个clearAll()方法 是用来清除所有绘制的图形的。用来做重新绘制的功能。

上面的是添加限行区的时候 进行绘制
如果在查看页面想要回显的话。需要获取的经纬度拼接字符串 然后拆分成数组 然后根据经纬度创建多边形图形

		<script type="text/javascript">
		// 百度地图API功能
	    var map = new BMap.Map('allmap');
	    var poi = new BMap.Point(113.858543,34.041015);
	    map.centerAndZoom(poi, 13);
	    map.setCurrentCity("许昌");
	    map.enableScrollWheelZoom();
	    var jdArrayStr = $("#jdArray").val();
	    var wdArrayStr = $("#wdArray").val();
	    
	    //回显禁行区域
	    //先将字符串给拆分成数组
	    var jdArray = jdArrayStr.split(",");
	    var wdArray = wdArrayStr.split(",");
	    
	    var PolygonArr = [];
	  //遍历  按照顺序存入
   	 for(i=0;i<jdArray.length;i++){
   		PolygonArr.push(new BMap.Point(jdArray[i],wdArray[i]))
   	 }
	  //console.log(PolygonArr)
	    
	    var polygon = new BMap.Polygon(PolygonArr, {
	    	strokeColor:"black", 
	    	fillColor:"blue",
	    	strokeWeight:3, 
	    	strokeOpacity:0.5,
	    	fillOpacity: 0.2});  //创建多边形
	    	map.addOverlay(polygon);
		</script>