百度地图绘图工具的使用

时间：2024-02-23 09:32:09

首先引入工具，不要忘了引入百度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; // 阻止表单跳转
        });

 

相关文章