百度地图鼠标绘制获取坐标点并传递给后端

最新推荐文章于 2024-05-30 08:05:27 发布

weixin_50435280

最新推荐文章于 2024-05-30 08:05:27 发布

阅读量390

点赞数 11

文章标签： spring boot html

本文链接：https://blog.csdn.net/weixin_50435280/article/details/136609172

版权

本文参考了另一位博主的文章《百度地图鼠标绘制获取坐标点》，

链接：https://blog.csdn.net/qq_30807431/article/details/102942006

百度地图API提供了drawManage类来实现鼠标绘制点，线，面，但是我们怎么获取对应的点坐标呢？

通过查阅百度地图的文档，我发现可以通过事件监听来获取对应的坐标。

但是这个坐标，是在前端var变量里，我该怎么把var变量的值传给后端呢？或者说，我该怎么把script里的变量回传给后端？

查阅CSDN的大佬们的解决方案，一般是在Script里直接通过axios来拼接url实现传参。但是我是在thymeleaf模板下做的项目，再添加axios太过繁琐，所以我用document类里的getElementById来找到我body部分里form表单的input,然后setAttribute给input赋值，通过表单传递给后端。

这个时候，又出现了新的bug,因为我们在事件监听里获取到的是一个JSONarray数组（以折线绘制为例），我们需要先通过JSON.stringify()来传递json串，然后通过toString转化为input可以接收的String字符串，这样，我们就把script里的变量值回传给了form表单，接着通过表单上传就可以把数据传递到后端了。

在后端里我们还需要对数据重新处理，重新转化回array数组，这个比较简单，就不罗嗦了。

下面是完整的前端代码（代码没核对，应该能跑，关键步骤已经通过注释写明白了，大家自取）

<!DOCTYPE html>
<html lang="en" xmlns:th=“http://www.thymeleaf.org”>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  
    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=tNHf57ZrqRiuyh6WVlAirN6OHYQzRt5Z"></script>

    <!--加载鼠标绘制工具-->
    <script type="text/javascript"
            src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="//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:90%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
    </div>
</div>
<div id="result" style="overflow: hidden;position: absolute;z-index: 100;top:85%;">

    <form method="post" th:action="@{/user/testPage}">          
        <input  type="hidden" name="pn" id="position"  >
        <button type="submit"onclick="getpoints()" >上传</button>
    </form>

</div>
<script type="text/javascript" th:inline="javascript">

    // 百度地图API功能
    var map = new  BMap.Map('map', { enableMapClick: false });
    map.centerAndZoom(new BMap.Point(120.575588, 31.275412), 15);  // 初始化地图,设置中心点坐标和地图级别
    //map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.enableContinuousZoom(true);    //启用地图惯性拖拽，默认禁用

    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })); //向地图中添加比例尺控件
   
    var overlays = [];
    var overlaycomplete = function (e) {
        var overlay = e.overlay;//总事件结束监听里，将坐标信息传给变量overlay
        overlays.push(overlay);
    };
        var polygoncomplete = function (e, overlay) {
            position=overlay.getPath();
        };

        var markercomplete = function (e, overlay) {
             position=overlay.getPosition();//在点绘制事件监听里是通过getPosition()函数获取点对象（object）
        };
    var polylinecomplete = function (e, overlay) {
        position=overlay.getPath();
//在折线绘制事件监听里，通过getPath()函数获取折线的点数组

    };

    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), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    drawingManager.addEventListener('polylinecomplete', polylinecomplete);
    drawingManager.addEventListener('polygoncomplete', polygoncomplete);
    drawingManager.addEventListener('markercomplete', markercomplete);

//关键操作：通过document.getElementById函数来对body里的input赋值。先通过id找到form表单里的input组件,
//然后setAttribute("属性名"，”属性值“)赋值。需要注意的是，input组件接受的是String类型的数据。
//但是我们监听事件返回的是Jsonarray数组（点绘制返回object对象）,需要先通过JSON.stringify函数来传递JSON串，
//然后通过toString函数转化为String对象，赋值给input.这样就实现了将var变量的值传递给thymeleaf组件，
//之后就按正常表单提交操作就好，后端获取数据后再转化为Array数组重新处理。

    function getpoints() {
        console.dir(position);
                document.getElementById('position').setAttribute("value",JSON.stringify(position).toString());
       
    }

    var size = new BMap.Size(80, 20);
    map.addControl(new BMap.CityListControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        offset: size,
    }));


</script>
</body>

</html>