UniApp是一个基于Vue.js框架开发的跨平台应用开发框架，可以同时构建iOS、Android、H5等多个平台的应用。它使用了基于前端技术栈的Web开发方式，通过编写一套代码，即可在不同平台上运行和发布应用。
UniApp具有以下特点：
- 跨平台开发：UniApp支持将一套代码同时转换为iOS、Android、H5等多个平台的应用，大大节省了开发时间和成本。
- 兼容性强：UniApp基于Vue.js框架，结合了各个平台的原生能力，可以调用设备的硬件功能，提供丰富的API接口，满足各种应用的需求。
- 开发便捷：UniApp使用Vue.js的开发语法，配合强大的插件系统和组件库，使得开发过程更加高效和简洁。
- 性能优化：UniApp针对不同平台做了性能优化，实现了快速启动和流畅的用户体验。
- 社区活跃：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: {}, // 腾讯地图小程序的SDK polyline: [], // 路线 map: null, // 创建的map对象 index: 0,
然后
onReady() { // 创建map对象 this.map = uni.createMapContext('map') },
其次
this.qqmapsdk = new QQMapWX({ key: '' // 自己申请的key值 }); this.routePlanning();
最后就是路线规划的重要代码了
// 路线规划 routePlanning() { let that = this that.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].polyline var pl = [] // 点串数组 // 坐标解压(返回的点串坐标，通过前向差分进行压缩) var kr = 1000000 for (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"为是否显示路线
希望对您有所帮助
