point数组经检验可以打印出来,赋值polyline后,地图仍然是不显示,请问哪里出错了
4条回答 默认 最新
关注
引自免费微信小程序:皆我百晓生
根据您提供的代码,看起来您正在尝试从腾讯地图API获取驾车路线,并将其显示在地图上。在分析您的代码之后,我发现了一个可能导致地图不显示路线的问题:在设置polyline时,您没有正确地将数据格式化为腾讯地图组件期望的形式。
这里是修复后的
getRouteDriving()
方法:methods: { async getRouteDriving() { this.point = []; try { const response = await uni.request({ url: `https://apis.map.qq.com/ws/direction/v1/driving/?from=${this.start_address.latitude},${this.start_address.longitude}&to=${this.end_address.latitude},${this.end_address.longitude}&accuracy=30&output=json&callback=cb&key=${this.keycode}`, }); if (response.data.status === 0) { const coors = response.data.result.routes[0].polyline; // 这里不需要进行坐标调整,因为腾讯地图API返回的polyline已经是正确的格式 const points = coors.split(';').map(coord => coord.split(',').map(parseFloat)); this.point = points.flatMap(point => [{ latitude: point[0], longitude: point[1] }]); console.log(this.point); this.polyline = [ { points: this.point, color: "#3FB837", width: 3, dottedLine: false, // 如果不是点线,这里设为false }, ]; } } catch (error) { console.error("Error fetching route:", error); } }, }
然后,在您的模板文件中,确保已经正确引入了腾讯地图组件库,并且添加了相应的权限配置(如GPS、网络等)。确保
<map>
标签中的属性与上面的方法中使用的变量匹配。<template> <view> <map class="map" :longitude.sync="longitude" :latitude.sync="latitude" :markers="markers" :polyline="polyline"> </map> <button @tap="getRouteDriving()">规划路径</button> </view> </template> <script> // ...其他导入语句 import Map from '@vant/components/map/index.vue'; export default { components: { Map, }, // ...其他代码 } </script>
检查一下是否已正确设置了地图的经纬度(longitude和latitude)以及markers。同时,确保在项目的manifest.json或app.json中启用了相应的地图和位置权限。
如果以上步骤都无法解决您的问题,请提供更详细的错误信息或日志,以便进一步排查。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 在matlab中Application Compiler后的软件无法打开
- ¥15 想问一下STM32创建工程模板时遇到得问题
- ¥15 Fiddler抓包443
- ¥20 Qt Quick Android 项目报错及显示问题
- ¥15 而且都没有 OpenCVConfig.cmake文件我是不是需要安装opencv,如何解决?
- ¥15 oracleBIEE analytics
- ¥15 H.264选择性加密例程
- ¥50 windows的SFTP服务器如何能批量同步用户信息?
- ¥15 centos7.9升级python3.0的问题
- ¥15 安装CentOS6时卡住