【百度地图api】前端 百度地图添加地理围栏

 需求：添加教练场区域，在百度地图上选择多边形电子围栏，保存坐标；

主要参考百度地图api；

遇到的小坑：注意绘制百度地图多边形时，传入的坐标数组的结构！！！

相对来说比较简单，百度api已经很详细了。

遗留问题：百度坐标转GPS坐标，还是没有找到最佳实践，有好的解决方案，欢迎交流。

 

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度api去申请"></script>
<script src="@Url.Content("~/Plugins/SXYC.Plugin.BusinessData.Plugin/Scripts/distpicker/distpicker.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" />
<!--加载检索信息窗口-->
<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" />
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap", { enableMapClick: false });//构造底图时，关闭底图可点功能
    //map.centerAndZoom(new BMap.Point(114.519103, 38.05323), 11);  // 石家庄 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(new BMap.Point(109.60, 23.10), 11);  // 初始化地图,设置中心点坐标和地图级别
    //map.addControl(new BMap.MapTypeControl());   //添加地图类型控件-->
    map.setCurrentCity("贵港市");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    function searchSite() {
        //地图关键字搜索
        var local = new BMap.LocalSearch(map, {
            renderOptions: { map: map }
        });
        var siteKeys = $("#siteKeys").val();
        //alert(siteKeys);
        local.search(siteKeys);

    }
    // 绘制多变形
    var overlays = [];
    var overlaycomplete = function (e) {
        map.clearOverlays();
        //overlays.push(e.overlay);
        var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
        $("#Longitude").val(path[0].lng);
        $("#Latitude").val(path[0].lat);
     
        var polygon = new BMap.Polygon(path, styleOptions);
        map.addOverlay(polygon);
        // 保存多变形坐标点
        var pll = new Array();
        for (var i = 0; i < path.length; i++) {

            pll[i] = (path[i].lng+","+ path[i].lat);
        }
        pll = pll.join(";");
        $("#Polygon").val(pll);
        $("#BDPolygon").val(pll);
    };

    var styleOptions = {
        strokeColor: "red",    //边线颜色。
        fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 2,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围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), //偏离值
            drawingModes: [
                BMAP_DRAWING_POLYGON
            ]
        },
        circleOptions: styleOptions, //圆的样式
        //polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    function clearAll() {
        map.clearOverlays(); 
        $("#Longitude").val(null);
        $("#Latitude").val(null);
        $("#Polygon").val(null);
    }
</script>