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即可