简易地图定位,Uniapp与SpringBoot

飞翔的松鼠君

已于 2024-03-08 13:52:32 修改

阅读量1.4k

点赞数 31

于 2024-03-08 13:49:35 首次发布

本文链接：https://blog.csdn.net/qq_45399864/article/details/136559971

版权

开发组件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在UNIAPP前端通过WebGL和百度地图API获取用户位置，以及在SpringBoot后端创建地图导航模板，包括使用Geolocation进行定位、设置导航路线和动态替换参数。最后，通过HTTP接口提供服务，实现微信webandroid平台的适配。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    UNIAPP端 
密钥获取
脚本链接获取-示例中的head标签内
导入js,通过百度地图提供的脚本链接 
  <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=JSAPI密钥"></script>插入到根目录下的 /index.html文件中
 
获取当前经纬度    <script>
	export default {
		data() {
			return {}
		},
		created() {
			this.getPosistion();
		},
		methods: {
			getPosistion() {
				var geolocation = new BMapGL.Geolocation();
				// 获取当前坐标
				geolocation.getCurrentPosition(function(r){
				    console.log("current"+r.point.lng,r.point.lat);
				})
		}
	}
    </script>
 
通过web-view内嵌地图导航，通过服务端响应html页面可以实现微信 web android几个平台的适配    <template>
    	<view class="content">
            <web-view src="http://192.168.0.110:8080/yunduo/navigation">
    	</view>
    </template>
 
 
SpringBoot端 
创建地图导航模板    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            body, html {
                width: 100%;
                height: 100%;
                margin:0;
                font-family:"微软雅黑";
            }
            #container{
                width:100%;
                height:100%;
            }
            #result{
                position: fixed;
                top: 50px;
                left: 20px;
                width: 300px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: #fff;
                box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
                border-radius: 7px;
                z-index: 99;
            }
        </style>
        <title>根据起点和终点经纬度驾车导航</title>
        <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=${wappkey}"></script>
    </head>
    <body>
    <div id="container"></div>
    <script>
        var map = new BMapGL.Map("container");
        // 创建地图
        var geolocation = new BMapGL.Geolocation();
        // 获取当前坐标并导航至对应地图
        geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){
                        var mk = new BMapGL.Marker(r.point);
                        map.addOverlay(mk);
                        map.panTo(r.point);
                        map.centerAndZoom(new BMapGL.Point(r.point.lng,r.point.lat), 11);
                        
                        // 当前坐标
                        var p1 = new BMapGL.Point(r.point.lng,r.point.lat)
                        console.log(r.point.lng,r.point.lat)
                        
                        // 目标点
                        var p2 = new BMapGL.Point(${lo},${la});
                        
                        // 导航路线
                        var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                        driving.search(p1, p2);
                        
                    }else {
                        alert('failed' + this.getStatus());
                    }
                })
    </script>
    </body>
    </html>
 
创建工具类替换目标点 和 密钥    @Component
    public class PostionUtils {
        public byte[] getPositionTemplate(String WAK,String Longitude,String Latitude) throws FileNotFoundException {
            // 获取模板文件路径
            String file = this.getClass().getClassLoader().getResource("").getPath() + "/template/option.html";//注意getResource("")里面是空字符串
            // 创建读取流
            BufferedReader bufferedReader = new BufferedReader(new FileReader(file));
            // 收集数据
            StringBuffer buffer = new StringBuffer();
            // 遍历模板文件，读取所有数据
            bufferedReader.lines().forEach(item -> {
                buffer.append(item+'\n');
            });
            // 替换密钥和经纬度 封装字节数组并返回
            return buffer.toString().replace("${wappkey}",WAK).replace("${lo}",Longitude).replace("${la}",Latitude).getBytes();
        }
    }
 
为导航页面提供接口        @RequestMapping("/yunduo")
        public class PositionController {
            // 前台访问 localhost:8080/yunduo/navigation 即可获得到目标指定点的html导航
            @GetMapping("/navigation")
            public void navigation(HttpServletResponse response) throws IOException {
                byte[] positionTemplate = postionUtils.getPositionTemplate(BaiduConfig.WAK, "104.712","31.4533");
                response.setContentType("text/html; charset=utf-8");
                ServletOutputStream outputStream = response.getOutputStream();
                outputStream.write(positionTemplate);
                outputStream.flush();
                outputStream.close();
        }
    }
 
启动后端 启动uniapp即可

                