uniapp实现路线规划

UniApp是一个基于Vue.js框架开发的跨平台应用开发框架，可以同时构建iOS、Android、H5等多个平台的应用。它使用了基于前端技术栈的Web开发方式，通过编写一套代码，即可在不同平台上运行和发布应用。

UniApp具有以下特点：

1. 跨平台开发：UniApp支持将一套代码同时转换为iOS、Android、H5等多个平台的应用，大大节省了开发时间和成本。

2. 兼容性强：UniApp基于Vue.js框架，结合了各个平台的原生能力，可以调用设备的硬件功能，提供丰富的API接口，满足各种应用的需求。

3. 开发便捷：UniApp使用Vue.js的开发语法，配合强大的插件系统和组件库，使得开发过程更加高效和简洁。

4. 性能优化：UniApp针对不同平台做了性能优化，实现了快速启动和流畅的用户体验。

5. 社区活跃：UniApp拥有庞大的开发者社区，提供了丰富的资源和支持，开发者可以互相交流和分享经验。

总之，UniApp是一款强大的跨平台应用开发框架，可以帮助开发者快速构建高性能、兼容多平台的应用。

作为一个可以一端生成多端的框架今天分享一个路线标注的例子

<view class="mine_map"><map id="map" class="map" :latitude="lat" :longitude="long" :show-location="false":polyline="polyline"></map></view>

我是用的uniapp自带的map标签使用的腾讯地图

首先要manifest.json文件如下配置

然后你需要在腾讯地图下载qqmap-wx-jssdk1.2.zip压缩包；

路径：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

将下载好的压缩包解压然后将其qqmap-wx-jssdk.js文件放到项目文件中；然后将其引入

在data的return中声明两个数组用于存放起点与终点以及一些其他需要用到的变量

form: { // 初始地latitude: '',longitude: '',},to: { // 目的地坐标latitude: '',longitude: '',},
qqmapsdk: {}, // 腾讯地图小程序的SDKpolyline: [], // 路线map: null, // 创建的map对象index: 0,

然后

onReady() {// 创建map对象this.map = uni.createMapContext('map')},

其次

this.qqmapsdk = new QQMapWX({key: '' // 自己申请的key值});this.routePlanning();

最后就是路线规划的重要代码了

// 路线规划routePlanning() {let that = thisthat.qqmapsdk.direction({mode: 'driving', // 驾车from: { // 起始位置(当前位置)坐标latitude: that.lat,longitude: that.long},to: { // 目的地坐标latitude: that.end_lat,longitude: that.end_long,},// 目的地位置坐标success(res) {// console.log(res)var coors = res.result.routes[0].polylinevar pl = [] // 点串数组// 坐标解压(返回的点串坐标，通过前向差分进行压缩)var kr = 1000000for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr}// 将解压后的坐标放入点串数组pl中for (var i = 0; i < coors.length; i += 2) {pl.push({latitude: coors[i],longitude: coors[i + 1]})}console.log('点串数组', pl)// 设置polyline属性，将路线显示出来，将解压坐标第一个数据作为起点that.polyline = [{points: pl,color: '#367EEF', // 线的填充色width: 3, // 折现宽度borderWidth: 2, // 边线宽度 borderColor: '#5B98FD', // 边线颜色lineCap: 'square', // 线端头showArrow: true, // 沿线路方向显示箭头}]}})},

注：map标签中:polyline="polyline"为是否显示路线

希望对您有所帮助