百度地图截取指定区域坐标（可伸拉标记点）

最新推荐文章于 2024-06-25 15:48:39 发布
最新推荐文章于 2024-06-25 15:48:39 发布
阅读量2.3k 收藏 2
点赞数 1
文章标签： html 街景地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45432736/article/details/107468463
版权

实际效果及简单的操作说明

在这里插入图片描述
界面右上角点击
在这里插入图片描述
进入绘制多边形状态，点击地图 一个一个点开始绘制，绘制完的多边形可以拉伸，相应的多边形会多几个点
在这里插入图片描述最后一个点，双击后退出多边形编辑状态
在这里插入图片描述
点击右下角获取最后一个覆盖物信息，网页底部显示截选的区域的，由你标记的几个点
在这里插入图片描述附上完整代码

<!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%;
            overflow: hidden;
            margin: 0;
        }

        #allmap {
            margin-right: 300px;
            height: 100%;
            overflow: hidden;
        }

        #result {
            border-left: 1px dotted #999;
            height: 100%;
            width: 295px;
            position: absolute;
            top: 0px;
            right: 0px;
            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=3.0&ak=OI6Z2UcaF0Q8kqCxVIrxchrQE7jzpPCd">
    </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" />

    <title>鼠标绘制工具</title>
</head>

<body>
    <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
        <div id="map"
            style="height:calc(100% - 200px);-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
        </div>
        <div id="showPanelBtn"
            style="position:absolute;font-size:14px;top:50%;margin-top:-95px;right:0px;width:20px;padding:10px 10px;color:#999;cursor:pointer;text-align:center;height:170px;background:rgba(255,255,255,0.9);-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;font-family:'微软雅黑';font-weight:bold;">
            显示检索结果面板<br />
            <</div> <div id="panelWrap"
                style="width:0px;position:absolute;top:0px;right:0px;height:100%;overflow:auto;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                <div style="width:20px;height:200px;margin:-100px 0 0 -10px;color:#999;position:absolute;opacity:0.5;top:50%;left:50%;"
                    id="showOverlayInfo">此处用于展示覆盖物信息</div>
                <div id="panel" style="position:absolute;"></div>
        </div>
    </div>

    <div id="result">
        <dl>
            <dt>绘制工具功能</dt>
            <ul>
                <li><label><input type="radio" name="openClose1" onclick="drawingManager.open()" />打开</label>
                    <label><input type="radio" name="openClose1" onclick="drawingManager.close()"
                            checked="checked" />关闭</label></li>
            </ul>
            </dd>
            <dt>是否进行线或面积的计算(单位米)</dt>
            <ul>
                <li><label><input type="radio" name="openClose" onclick="drawingManager.enableCalculate()" />打开</label>
                    <label><input type="radio" name="openClose" onclick="drawingManager.disableCalculate()"
                            checked="checked" />关闭</label></li>
            </ul>
            </dd>
            <dt>绘制功能</dt>
            <dd>
                <ul>
                    <li>
                        <label><input type="radio" name="drawmode"
                                onclick="drawingManager.setDrawingMode(BMAP_DRAWING_MARKER)"
                                checked="checked" />画点</label>
                        <input type="checkbox" id="isInfowindow" /> 是否带信息窗口
                    </li>
                    <li>
                        <label><input type="radio" name="drawmode"
                                onclick="drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE)" />画圆</label>
                    </li>
                    <li>
                        <label><input type="radio" name="drawmode"
                                onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)" />画线</label>
                    </li>
                    <li>
                        <label><input type="radio" name="drawmode"
                                onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)" />画多边形</label>
                    </li>
                    <li>
                        <label><input type="radio" name="drawmode"
                                onclick="drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE)" />画矩形</label>
                    </li>
                </ul>
            </dd>
            <dt>覆盖物操作</dt>
            <dd>
                <ul>
                    <li>
                        <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)" />
                        <input type="button" value="清除所有覆盖物" onclick="clearAll()" />
                        <input type="button" value="获取最后一个覆盖物信息" id="getLastOverLay" />
                    </li>
                </ul>
            </dd>
        </dl>

    </div>

    <textarea id="jg" readonly="readonly"
        style="width:100%;padding: 10px;overflow: auto; position: absolute;bottom: 0px;height: 180px;">
    </textarea>
    <script type="text/javascript">
        // 百度地图API功能  
        var map = new BMap.Map('map', {
            mapType: BMAP_HYBRID_MAP
        });
        map.centerAndZoom("丽水", 15);
        map.enableScrollWheelZoom();
        map.addEventListener("rightclick", function (e) {
            alert(e.point.lng + "," + e.point.lat);
        });
        $("getLastOverLay").onclick = function () {
            console.log(overlays);
            if (overlays.length) {
                var arr = overlays[overlays.length - 1].ka;
                var str = ""
                arr.forEach(element => {
                    str += "[" + element.lng + "," + element.lat + "],"
                });
                document.getElementById("jg").innerHTML = str;
            } else {
                alert("没有覆盖物");
            }
        }
        function getBoundary(address) {
            var bdary = new BMap.Boundary();
            bdary.get(address, function (rs) {
                var count = rs.boundaries.length; //行政区域的点有多少个
                if (count === 0) {
                    alert("未能获取当前输入行政区域");
                    return;
                }
                var pointArray = [];
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], {
                        strokeWeight: 3,
                        strokeColor: "red",
                        fillOpacity: 0.5
                    }); //建立多边形覆盖物
                    map.addOverlay(ply); //添加覆盖物
                    pointArray = pointArray.concat(ply.getPath());
                }
                map.setViewport(pointArray); //调整视野
            });
        }

        //信息窗口的内容定义  
        var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
            '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
            '</div>';
        //创建带信息窗口的poi点  
        var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: "百度大厦", //标题  
            width: 290, //宽度  
            height: 105, //高度  
            panel: "panel", //检索结果面板  
            enableAutoPan: true, //自动平移  
            searchTypes: [
                BMAPLIB_TAB_SEARCH, //周边检索  
                BMAPLIB_TAB_TO_HERE, //到这里去  
                BMAPLIB_TAB_FROM_HERE //从这里出发  
            ]
        });

        var overlays = [];
        function showLatLon(a) {
            console.log(a);
            var len = a.length;
            var s = '';
            var arr = [];
            for (var i = 0; i < len - 1; i++) {
                arr.push([a[i].lng, a[i].lat]);
                console.log(a[i].lng + "," + a[i].lat);
                s += '<li>' + a[i].lng + ',' + a[i].lat +
                    '<span class="red" title="删除" οnclick="bmap.delPoint(' + i + ')">X</span></li>';
            }
            this.overlaysCache = arr;
            $("panelWrap").innerHTML = '<ul>' + s + '</ul>';
        }
        //回调获得覆盖物信息  
        var overlaycomplete = function (e) {
            overlays.push(e.overlay);
            e.overlay.enableEditing();
            //添加lineupdate使得覆盖物区域可调整
            e.overlay.addEventListener("lineupdate", function (e) {
            });
            var result = "";
            result = "<p>";
            result += e.drawingMode + ":";
            if (e.drawingMode == BMAP_DRAWING_MARKER) {
                result += ' 坐标：' + e.overlay.getPosition().lng + ',' + e.overlay.getPosition().lat;
                if ($('isInfowindow').checked) {
                    searchInfoWindow.open(e.overlay);
                }
            }
            if (e.drawingMode == BMAP_DRAWING_CIRCLE) {
                result += ' 半径：' + e.overlay.getRadius();
                result += ' 中心点：' + e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat;
            }
            if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e
                .drawingMode ==
                BMAP_DRAWING_RECTANGLE) {
                result += ' 所画的点个数：' + e.overlay.getPath().length;
            }
            result += "</p>";
            $("showOverlayInfo").style.display = "none";
            $("panel").innerHTML += result; //将绘制的覆盖物信息结果输出到结果面板  
        };
        var styleOptions = {
            strokeColor: "red", //边线颜色。  
            fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。  
            strokeWeight: 3, //边线的宽度，以像素为单位。  
            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), //偏离值  
                scale: 0.8 //工具栏缩放比例  
            },
            circleOptions: styleOptions, //圆的样式  
            polylineOptions: styleOptions, //线的样式  
            polygonOptions: styleOptions, //多边形的样式  
            rectangleOptions: styleOptions //矩形的样式  
        });
        //添加鼠标绘制工具监听事件，用于获取绘制结果  
        drawingManager.addEventListener('overlaycomplete', overlaycomplete);

        function $(id) {
            return document.getElementById(id);
        }

        function clearAll() {
            console.log(overlays.length);
            for (var i = 0; i < overlays.length; i++) {
                map.removeOverlay(overlays[i]);
            }
            overlays.length = 0
        }
        var clearLast = function (e) {
            // debugger
            console.log(e);
            console.log(overlays[0].ka);
            arr = overlays[overlays.length - 1].ka
            var box = arr[arr.length - 1] //获取创建的最新一个覆盖物
            // console.log(box);
            // clearAll();
            overlays.push(e.overlay);
            e.overlay.enableEditing();
            e.overlay.addEventListener("lineupdate", function (e) {
                if (window.allObject.length) {
                    getOverlayPath(allObject)
                }
            });
            var pointArray = e.overlay.getPath();


            if (window.allObject.length) {
                getOverlayPath(allObject)
            }
        }
        var isPanelShow = false;
        //显示结果面板动作  
        $("showPanelBtn").onclick = showPanel;

        function showLatLon(a) {
            console.log(a);
            var len = a.length;
            var s = '';
            var arr = [];
            for (var i = 0; i < len - 1; i++) {
                arr.push([a[i].lng, a[i].lat]);
                console.log(a[i].lng + "," + a[i].lat);
                s += '<li>' + a[i].lng + ',' + a[i].lat +
                    '<span class="red" title="删除" οnclick="bmap.delPoint(' + i + ')">X</span></li>';
            }
            this.overlaysCache = arr;
            $("panelWrap").innerHTML = '<ul>' + s + '</ul>';
        }
        function showPanel() {
            if (isPanelShow == false) {
                isPanelShow = true;
                $("showPanelBtn").style.right = "230px";
                $("panelWrap").style.width = "230px";
                $("map").style.marginRight = "230px";
                $("showPanelBtn").innerHTML = "隐藏绘制结果信息<br/>>";
            } else {
                isPanelShow = false;
                $("showPanelBtn").style.right = "0px";
                $("panelWrap").style.width = "0px";
                $("map").style.marginRight = "0px";
                $("showPanelBtn").innerHTML = "显示绘制结果信息<br/><";
            }
        }
    </script>
</body>

</html>
</script>
阿鼎0815
关注
百度地图-地图四个角点坐标
01-07
在IT行业中，地图应用是日常生活中不可或缺的一部分，特别是在...这涉及到对百度地图API的深入理解和灵活运用，以及对地图坐标系统的理解。通过合理利用这些坐标信息，开发者可以构建出更加智能、个性化的地图服务。
百度地图获取行政区域以及自定义显示网格
凉茶冰
05-30 7476
目录 1 问题描述 2 独立显示区域 3 自定义网格 4 显示自定义网格 5 延展 6 参考文献 1 问题描述 (1) 通过百度地图或者高德地图只展示某一个行政区域，例如整个地图只展示郑州市金水区，其他区域不显示。 (2) 整个地图只显示自定义的区域，并显示区域的自定义名称。 百度地图的JSAPI有关于显示行政区域边界的专用方法，参考百度官方的例子 百度官方api提供的这...
按行政区域范围下载并裁剪卫星地图数据教程
06-16 4127
一、准备工作 安装水经注万能地图下载器，如果没有安装本软件，可以百度“水经注软件”到官方网站下载。 点击下载 二、下载地图 按照行政区域下载卫星地图，这里以“米易县”为例。 启动水经注万能地图下载器，在查询定位中输入“米易县”。 点击“搜索”按钮出现该县的行政边界，在行政边界内双击，开始新建任务。 在级别
抠某区域地图方法
老白干的zone
11-17 2103
2. 选择要抠出来的区域，右侧选择要下载的json文件，如红框所示。3. 打开下载的文件，内容全部复制。5. 如下图所示，将下载文件内容赋值。1.打开阿里云数据可视化平台。4. 打开百度地图示例。
有啥办法把百度地图某个点1公里范围内截个图？
pdcfighting的博客
02-15 1105
点击上方“Python爬虫与数据挖掘”，进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤东方欲晓，莫道君行早。大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个地图截图的问题，问题如下：第一个问题：你们有啥办法把百度地图某个点1公里范围内截个图。第二个问题：第二是,我有四个相临的位置,4个地方能不能同时画4个1公里的大圆圈。像下图这样子,相邻地...
地图裁剪
蓝Buff的博客
01-27 1090
  当你有一张大地图，你想详细绘制地图里某个地方，但又不想绘制整个大地图，那么你就需要用到地图裁剪了。下面我们通过一个例子来认识一下地图裁剪吧！ 下面这个是广州市南沙区的地图    然后我们需要的是黄山鲁森林公园附近的地图 （被圈住那一部分 ）    首先我们选择地图，再选择地图裁剪，有四种裁剪方式，根据自己的需要来选择，我这里选择的是圆形裁剪    然后就把需要的地方...
根据百度API获取多边形坐标、支持二次编辑坐标点
qq_36208263的博客
07-28 363
由于百度官网坐标拾取功能获取坐标点既视感不够清晰以及二次修改麻烦，简单实现二次修改功能，留做记录！初始化调整中心点、多边型坐标。
3种matlab截取指定区域图片.zip
05-19
在MATLAB中，截取指定区域的图片是一项常见的任务，特别是在图像处理和分析中。这里，我们将探讨三种不同的方法来实现这一目标。首先，我们来看看标题和描述所提及的要点：选择感兴趣的区域并进行截取，以便后续对这...
Android截取指定区域保存
11-24
要截取屏幕的特定区域，首先需要确定该区域的坐标和大小。这通常可以通过触摸事件或者自定义手势识别来实现。在用户选择指定区域后，我们可以创建一个与该区域相同大小的Bitmap，然后使用Canvas的`drawBitmap()`方法...
百度地图api实现部分功能，根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口
05-19
在本文中，我们将深入探讨如何使用百度地图API来实现一系列关键功能，包括连接多个坐标以形成轨迹、坐标拾取、以及创建带有信息窗口的多个标注点。这些功能在Web应用开发、JavaScript工具包、企业应用以及GIS/地图/...
这个示例实现截取指定区域的图片
10-27
这个示例正是这样一个功能的实现，它允许用户通过触摸屏幕上的某一点来截取以该点为左上角的一个正方形区域，并将截取到的图像展示在一个100*100像素的ImageView中。以下是对这一实现过程的详细解释。 首先，我们...
计算机屏幕地图是不是地图,地图软件 如何在截图时超出一个屏幕？
weixin_42538175的博客
07-29 1553
现在网上的电子地图，如百度地图、腾讯地图等截图时最多只能一个屏幕，有没有方法截图时可以超出一个屏幕呢？【解题思路】在线地图显示与基本操作(放大、缩小、移动、坐标显示)是Javascript API的基本功能，大多数地图网站服务器配置都是某个城市的全部区域地图数据，只是根据用户查询显示某一区域的地图画面，普通显示器是无法显示全区域地图画面，但是可以通过鼠标的移动实现区域画面的移动。所以要实现上述挑战...
怎么裁剪
SuperMap技术控
09-02 3847
作者：lly 背景 在实际应用中，地图十分庞大，而我们可能只需要对地图中的某一块区域进行研究，此时，可以通过“地图裁剪”功能提取该区域的地图或数据。同时可以减小数据量，提高数据处理的效率。 注意事项 1.被裁剪图层可以为点、线、面、CAD 图层、文本图层或者栅格图层，不支持对网络数据、路由数据和三维数据（三维点、线、面数据集）进行裁剪。 2.裁剪图层（或者绘制的裁剪区域）必须是面图层。 3.裁...
Supermap GIS 的地图剪切，包含线路和区域的剪切
慧小慧博客
04-21 2390
开发工具与关键技术：Supermap GIS 想要实现，在一个大的地图里获取到自己需要的区域模块，就得靠地图剪切，如： 我现在有一个完整的“广东省地图”，但我的任务是对“广州市增城区”进行查询与编辑，如果直接在“广东省地图”里面对“广州市增城区”进行查询与编辑的话，那么工作量就会非常的大，如果单单是对“广州市增城区”进行查询与编辑那么工作量就会降低，所以就得在“广东省地图”里面把“广州市增城区”给...
百度地图 - 自定义划分区域并获取区域内的坐标点
热门推荐
Asurplus
12-04 20万+
最近在做一个大数据人员分布的系统，需要能够在地图上自定义划分区域，并能够获取该区域内的坐标点信息，也是搞了很久才做出来，特此记录一下 1、百度地图API 首先我们需要去百度地图申请一个应用，得到密钥 http://lbsyun.baidu.com/ 2、自定义区域 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取自定义区域内的坐标点 - 百度地图
GIS百度地图——获取地图某一点坐标
qq_44776454的博客
05-30 1946
百度地图点位坐标获取方式
调用百度地图根据经纬度截图并保存
weixin_33812433的博客
06-16 1067
download("http://api.map.baidu.com/staticimage?width=400&height=300&center="+project.getLongitude()+","+project.getLatitude()+"&zoom=11", businessId+".jpg",request.getSession().getServletC...
vue引用百度地图，drawingManager.setDrawingMode不能接受参数，否则会报错
xingchen678的博客
06-30 667
vue引用百度地图，drawingManager.setDrawingMode不能接受参数，否则会报错
调用百度地图BMapLib.DrawingManager绘制点线面圆
最新发布
weixin_47459234的博客
06-25 568
调用百度地图BMapLib.DrawingManager绘制点线面圆
Android自定义滑动截取bitmap指定区域教程
"Android实现指定区域滑动截取bitmap功能" 在Android开发中，有时我们需要实现一个功能，允许用户在屏幕上指定一个区域并进行截图。这个功能常见于自定义截图应用或者需要用户精确选取图片部分的应用中。本篇将详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值