原始链接

最近，小程序的开发变得越来越流行。作为各种产品线的额外服务门户，它以其轻便，快速和强大的社交链吸引了大量的用户和开发人员。行业中有无止境的开发框架。 Wepy，mpvue，芋头等都朝着更快，更强大的方向发展。统一H5、微信，支付宝，百度和头条小程序的趋势是普遍的。

本文旨在讨论基于mpvue框架的map 小程序的开发思想，并进行共享和总结。话不多说，先体验一下：

GitHub源代码地址：

运行屏幕截图

mpvue简介和项目建设

mpvue = miniprogram + vue框架，说穿了，它是用vue框架小程序开发的。 mpvue最近已升级到2.x版本，该版本支持微信，支付宝，百度和头条小程序。与传统方法相比，mpvue开发具有以下优点：

从个人经验的角度来看，它非常柔滑。传统的Web应用程序开发无缝切换到小程序开发，基本上是零阈值。应该注意的是小程序的局限性以及与vue的区别：

然后，我们设置开发环境，开箱即可使用mpvue支架：

# 全局安装 vue-cli# 一般是要 sudo 权限的$ npm install --global vue-cli@2.9# 创建一个基于 mpvue-quickstart 模板的新项目# 新手一路回车选择默认就可以了$ vue init mpvue/mpvue-quickstart my-project# 安装依赖，走你$ cd my-project$ npm install$ npm run dev

下一步，改善文件结构，并添加诸如config，store，mixins等模块，如图所示：

app.json是小程序的特殊文件，还需要改进：

{ "pages": [ "pages/citylist/main", "pages/citydetail/main" ], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#eee", "navigationBarTitleText": "全球地铁，全程为你", "navigationBarTextStyle": "black" }}

然后，您可以愉快地编写Vue代码，单击一个页面，然后单击另一个页面，组件，存储，数据驱动，它随您便。

腾讯地图+ 小程序

让我们专注于地图访问。腾讯地图为小程序提供了两个访问端口，一个是个性化地图显示，另一个是专用的SDK。两者共同构成了小程序的地图生态学。

（1）个性化地图显示要求开发人员注册并申请开发人员密钥（密钥），然后将小程序绑定到管理背景中，然后设置个性化地图的样式才能使用：

其中，地图是小程序的本地组件。本机组件与WebView呈现过程分开，并且其级别最高。因此，无论设置多少z-index，本机组件都无法覆盖页面上的其他组件。上。坦率地说，本机组件由微信客户端提供，它不是内置的浏览器。因此，小程序提供了封面视图和封面图像组件，可以将其覆盖在某些本机组件上。这两个组件也是本机组件，但是使用限制与其他本机组件不同。

由于这个坑，作者浪费了很多时间。有时可以使用开发工具，但是组件完全混在真实机器上，因此以真实机器调试为准。对于本机组件，请不要使用过于复杂的css，它的许多css属性也没有得到很好的支持。

地图可以定义多个参数。不用说，经度和纬度。比例尺是指缩放比例，即地图的比例尺。折线在地图上绘制折线，标记用于标记地图上的点，而show-location用于显示用户的位置。 ，显示罗盘会显示向北箭头。

（[2）专用SDK当前提供以下功能：

以公共交通路线规划为例（以下代码已简化）：

第一步是初始化地图SDK对象

import config from '@/config'import QQMapWX from '../../assets/lib/qqmap-wx-jssdk.js' // 这里用未压缩版的代码const QQMapSDK = new QQMapWX({ key: config.qqMapKey || ''})

第二步，获取开始和结束坐标，并执行路线查询

// 坐标从上一页query传进来，坐标为浮点数，可通过geocoder接口获取this.fromLocation = { latitude: +query.from.split(',')[0] || -1, longitude: +query.from.split(',')[1] || -1}this.toLocation = { latitude: +query.to.split(',')[0] || -1, longitude: +query.to.split(',')[1] || -1}// 查询地图路线queryMapRoutine() { QQMapSDK.direction({ mode: 'transit', // 'transit'(公交路线规划) // from参数不填默认当前地址 from: this.fromLocation, to: this.toLocation, success: (res) => { console.log('路线规划结果', res); let routes = res.result.routes; this.routes = routes.map(r => { // 对每一种路线方案，分别进行解析 return this.parseRoute(r) }) console.log('parsed routes', this.routes) } })}

第三步，路线分析，生成路线描述等。

// 解析路线，包括距离，时间，描述，路线，起止点等parseRoute(route) { let result = {} // 出发时间 result.setOutTime = formatTime(new Date()) result.distance = route.distance < 1000 ? `${route.distance}米` : `${(route.distance / 1000).toFixed(2)}公里` result.duration = route.duration < 60 ? `${route.duration}分钟` : `${parseInt(route.duration / 60)}小时${route.duration % 60}分钟` result.desc = [] // 每一个路线分很多步，如先步行，后乘公交，再搭地铁等 route.steps.forEach(step => { // if (step.mode == 'WALKING' && step.distance > 0) { // result.desc.push(`向${step.direction}步行${step.distance}米`) // } if (step.mode == 'TRANSIT' && step.lines[0]) { let line = step.lines[0] if (line.vehicle == 'BUS') line.title = `公交车-${line.title}` if (line.vehicle == 'RAIL') line.title = `铁路` result.desc.push(`${line.title}: ${line.geton.title} —> ${line.getoff.title}，途经 ${line.station_count} 站。`) } }) result.polyline = [] result.points = [] //获取各个步骤的polyline，也就是路线图 for(let i = 0; i < route.steps.length; i++) { let step = route.steps[i] let polyline = this.getStepPolyline(step) if (polyline) { result.points = result.points.ｃｏｎｃａｔ(polyline.points) result.polyline.push(polyline) } } // 标记路线整体显示坐标 this.getStepPolyline.colorIndex = 0 let midPointIndex = Math.floor(result.points.length / 2) result.latitude = result.points[midPointIndex].latitude result.longitude = result.points[midPointIndex].longitude // 标记路线起止点 let startPoint = result.points[0] let endPoint = result.points[result.points.length - 1] result.markers = [ { iconPath: this.startIcon, id: 0, latitude: startPoint.latitude, longitude: startPoint.longitude, width: 28, height: 28, zIndex: -1, anchor: {x: 0.5, y: 1} }, { iconPath: this.endIcon, id: 1, latitude: endPoint.latitude, longitude: endPoint.longitude, width: 28, height: 28, zIndex: -1, anchor: {x: 0.5, y: 1} } ] return result},

第四步，getStepPolyline函数获取路线每一步的路线折线

getStepPolyline(step) { let coors = []; // 随机颜色 let colorArr = ['#1aad19', '#10aeff', '#d84e43'] let _dottedLine = true if (step.mode == 'WALKING' && step.polyline) { coors.push(step.polyline); _dottedLine = false } else if (step.mode == 'TRANSIT' && step.lines[0].polyline) { coors.push(step.lines[0].polyline); } else { return null } //坐标解压（返回的点串坐标，通过前向差分进行压缩） let kr = 1000000; for (let i = 0 ; i < coors.length; i++){ for (let j = 2; j < coors[i].length; j++) { coors[i][j] = Number(coors[i][j - 2]) + Number(coors[i][j]) / kr; } } //定义新数组，将coors中的数组合并为一个数组 let coorsArr = []; let _points = []; for (let i = 0 ; i < coors.length; i ++){ coorsArr = coorsArr.ｃｏｎｃａｔ(coors[i]); } //将解压后的坐标放入点串数组_points中 for (let i = 0; i < coorsArr.length; i += 2) { _points.push({ latitude: coorsArr[i], longitude: coorsArr[i + 1] }) } if (!this.getStepPolyline.colorIndex) { this.getStepPolyline.colorIndex = 0 } let colorIndex = this.getStepPolyline.colorIndex % colorArr.length this.getStepPolyline.colorIndex++ // 最终polyline结果 let polyline = { width: 7, points: _points, color: colorArr[colorIndex], dottedLine: _dottedLine, arrowLine: true, // 带箭头的线, 开发者工具暂不支持该属性 borderColor: '#fff', borderWidth: 1 } return polyline}

最后，绑定到地图并输出，我们可以得到大致如下的结果：

广州火车站 -> 广州塔15km 1小时地铁5号线 广州火车站 -> 珠江新城，途径6站地铁3号线 珠江新城 -> 广州塔，途径1站

通过这种方式，我们通过方向界面执行了简单的路线规划功能，然后将生成的数据绑定到地图组件。一个简单的小程序已经准备好了，非常简单吗？当然，如果您想做得更好，就必须调用其他类似的接口并慢慢改进细节。

有关更多实现，请参考源代码和小程序本身。如果有帮助，您可以争取支持。

其他

还有一个音频Web应用程序，发布在gitee页面上

感兴趣的朋友可以查看一下，以后我会在有空的时候添加开发教程和源代码，并单独共享。