百度地图自定义覆盖物拖拽功能的实现

最新推荐文章于 2023-04-20 12:10:21 发布

weixin_43926793

最新推荐文章于 2023-04-20 12:10:21 发布

阅读量1.5k

点赞数 1

分类专栏：百度地图web开发文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43926793/article/details/105815803

版权

百度地图web开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

借助百度地图标注的拖拽功能实现覆盖物的拖拽

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 500px;
            overflow: hidden;
        }

        #result {
            width: 100%;
            font-size: 12px;
        }

        dl,
        dt,
        dd,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        p {
            font-size: 12px;
        }

        dt {
            font-size: 14px;
            font-family: "微软雅黑";
            font-weight: bold;
            border-bottom: 1px dotted #000;
            padding: 5px 0 5px 5px;
            margin: 5px 0;
        }

        dd {
            padding: 5px 0 0 5px;
        }

        li {
            line-height: 28px;
        }
    </style>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></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" />
    <title>百度地图覆盖物拖拽</title>
</head>

<body>
    <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
        <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
        </div>
    </div>
    <div id="result">
        <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)" />
        <input type="button" value="清除所有覆盖物" onclick="clearAll()" />
    </div>

    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }

        // 百度地图API功能
        var map = new BMap.Map('map', { enableMapClick: false });
        var poi = new BMap.Point(116.307852, 40.057031);
        var Marker, beforeOverlay;
        map.centerAndZoom(poi, 16);//设置中心点坐标和地图级别
        map.enableScrollWheelZoom(); //启用鼠标滚动对地图放大缩小
        map.enableMapClick = false;

        //鼠标绘制完成回调方法   获取各个点的经纬度
        var overlays = [];
        let i = 0
        var overlaycomplete = function (e) {
            if (e.drawingMode !== "marker") {
                //添加覆盖物标识
                e.overlay.flag = e.drawingMode + i
                overlays.push(e.overlay);
                var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
                i++;
            }
        };

        var getClickPoint = function (e) {
            if (e.overlay) {
                //实例化坐标点
                console.log(e.overlay)
                Marker = new BMap.Marker(e.point)
                Marker.enableDragging();
                map.addOverlay(Marker)
                Marker.beforeLng = e.point.lng
                Marker.beforeLat = e.point.lat
                let flag = e.overlay.flag
                Marker.addEventListener('dragging', function (v) {
                    // 实时更新的坐标点数组
                    let newPointData = []
                    // 计算移动了多少距离
                    let newLng = v.target.point.lng - v.target.beforeLng
                    let newLat = v.target.point.lat - v.target.beforeLat
                    // 更新参照坐标
                    Marker.beforeLng = v.target.point.lng
                    Marker.beforeLat = v.target.point.lat
                    // 获取当前地图的覆盖物
                    let Alloverlays = map.getOverlays()
                    // 找出要拖动的覆盖物对象
                    beforeOverlay = Alloverlays.filter(ele => ele.flag == flag)[0]
                    // 获取要拖动的覆盖物对象的点数组
                    let beforeOverlayArr = beforeOverlay.getPath()
                    // 更新点数组坐标
                    beforeOverlayArr.forEach(element => {
                        let obj = new BMap.Point(element.lng + newLng, element.lat + newLat)
                        newPointData.push(obj)
                    });
                    // 清除旧的覆盖物实例
                    map.removeOverlay(beforeOverlay)
                    //实例化多边形覆盖物实例(新的多边形),折线覆盖物加判断
                    let ply;
                    if (flag.includes('polyline')) {
                        ply = new BMap.Polyline(newPointData)
                    } else {
                        ply = new BMap.Polygon(newPointData)
                    }
                    ply.flag = flag
                    map.addOverlay(ply)
                })
                // 结束拖拽清除marker
                Marker.addEventListener('dragend', function (v) {
                    map.removeOverlay(Marker)
                })

            } else {
                Marker = null, beforeOverlay = null;
            }
        }

        //实例化鼠标绘制工具
        var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, //是否开启绘制模式
            enableDrawingTool: true, //是否显示工具栏
            drawingMode: BMAP_DRAWING_POLYGON,//绘制模式  多边形
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                drawingModes: [
                    BMAP_DRAWING_MARKER,// 画点 
                    BMAP_DRAWING_CIRCLE,// 画圆 
                    BMAP_DRAWING_POLYLINE,// 画线 
                    BMAP_DRAWING_POLYGON,//画多边形 
                    BMAP_DRAWING_RECTANGLE,// 画矩形
                ]
            },
        })

        //添加鼠标绘制工具监听事件，用于获取绘制结果
        drawingManager.addEventListener('overlaycomplete', overlaycomplete);
        function clearAll() {
            for (var i = 0; i < overlays.length; i++) {
                map.removeOverlay(overlays[i]);
            }
            overlays.length = 0
        }
        map.addEventListener('click', getClickPoint)

    </script>
</body>

</html>