百度地圖繪圖工具的使用

首先引入工具，不要忘了引入百度api

<!--加載鼠標繪制工具-->
    <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" />

然后代碼如下

　　<div id="allmap" style="overflow: hidden; position: relative; zoom: 1;">
        <div id="map" style="-webkit-transition: all 0.5s ease-in-out; height: 100%; transition: all 0.5s ease-in-out;">
        </div>
        <input type="button" value="清除覆蓋物" onclick="clearOverlays()" style="position: absolute;top:10px;left:10px;">
    </div>
    <script type="text/javascript">
        var map = new BMap.Map("map", {
            enableMapClick: false //關閉鼠標默認點擊
        });
        map.centerAndZoom('青島市', 13);
        map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放

        var overlays = [];
        var overlaycomplete = function (e) {
            clearAll();
            overlays.push(e.overlay);
            e.overlay.enableEditing();//開啟編輯模式
            e.overlay.addEventListener("lineupdate", function (e) {
                showLatLon(e.currentTarget);
            });
            var pointArray = e.overlay.getPath();
            map.setViewport(pointArray); //調整視野

        };
        var styleOptions = {
            strokeColor: "red", //邊線顏色。
            fillColor: "red", //填充顏色。當參數為空時，圓形將沒有填充效果。
            strokeWeight: 2, //邊線的寬度，以像素為單位。
            strokeOpacity: 0.5, //邊線透明度，取值范圍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);

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

        //清除覆蓋物
        function clearOverlays() {
            map.clearOverlays();
        }
    </script>

 補充：如果不想開啟工具欄

　　　　 $('#drawLine').on('click', function () {
            drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);//開啟多邊形繪制
            drawingManager.open();
            return false; // 阻止表單跳轉
        });