uniapp--腾讯地图驾车路线规划

腾讯地图驾车路线规划

<template><view class=""><cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">驾车路线规划</block></cu-custom><view class="notice"><u-notice-bar :text="text"></u-notice-bar></view><view class="map"><map :latitude="latitude" :longitude="longitude" show-location :markers="covers" :polyline="polyline"></map></view><view class="btn"><button type="primary" size="mini" @click="selectionLocation">手动选择目的地</button><button type="warn" size="mini" @click="routePlanning">开始驾车路线规划</button></view></view>
</template><script>// 引入SDK核心类，地图组件import QQMapWX from '../components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'export default{data(){return{qqmapsdk:{},  // 腾讯地图小程序的SDKtext: '仅支持从您当前的位置开始规划路线，请注意，若您选择的起点、终点、途经点若不在道路上，会自动吸附到附近的道路上',  // 滚动通知latitude: '',  // 纬度longitude: '',  // 经度covers:[],  // 地图上面的标记点to:{  // 目的地坐标latitude: '',longitude: '',},polyline: [],  // 路线}},onLoad() {// 实例化API核心类this.qqmapsdk = new QQMapWX({key: ''  // 自己申请的key值})// 获取用户当前的位置this.getUserLocation()},methods:{// 获取用户当前的位置getUserLocation(){uni.getLocation({type:'gcj02',success: (e) => {this.latitude = e.latitudethis.longitude = e.longitude}})},// 手动选择目的地selectionLocation(){uni.chooseLocation({success: (e) => {// console.log(e)this.to.latitude = e.latitudethis.to.longitude = e.longitudethis.covers = [{latitude: e.latitude,longitude: e.longitude,width: 20, //宽height: 30, //高label:{content: e.name,color: '#ffffff',fontSize: 14,boderRadius: 2,bgColor: '#00c16f',display: 'ALWAYS',padding: 5,anchorX: 0,anchorY:-60,}}]}})},// 驾车路线规划routePlanning(){let that = thisthat.qqmapsdk.direction({mode: 'driving',  // 驾车from:{   // 起始位置(当前位置)坐标latitude: that.latitude,longitude: that.longitude},to: that.to,  // 目的地位置坐标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: '#352effdd',width: 4}]}})}}}
</script><style>page{width: 100%;height: 100%;}
</style>
<style lang="scss" scoped>.map{width: 100%;height: 800rpx;margin-top: 10rpx;map{width: 100%;height: 100%;}}.btn{width: 100%;display: flex;justify-content: space-around;}
</style>

运行展示

uniapp--腾讯地图驾车路线规划相关推荐

Android百度地图、高德地图、腾讯地图导航路线规划问题
Android百度地图.高德地图.腾讯地图导航路线规划在最近的项目中,需求是用户选择某个地址需要进行导航时,弹出百度地图.高德地图和腾讯地图让用户选择.如果该用户手机中已安装对应的地图App,则 ...
高德(百度)地图驾车路线规划和清除
高德地图: 带途径点的路径规划: var markerList=[{lng:116.379028,lat:39.865042},{lng:116.379028,lat:39.885042, },{ln ...
微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
android集成百度地图驾车路线规划并在地图上绘制出路线
1. 设置路线规划监听 mSearch.setOnGetRoutePlanResultListener(getRoutePlanListener);//设置路线规划监听 2.初始化路线监听器 /*路 ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
uniapp H5端使用高德地图完成路线规划
本项目是H5端,APP端地图的使用方法请参考我的另一篇博客uniapp,map地图组件打包原生APP 首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1.准 ...
Android studio百度地图SDK开发 2020最新超详细的Android 百度地图开发讲解(3) 路线规划步行骑行驾车路线规划
2020最新超详细的Android 百度地图开发讲解(3) 路线规划步行骑行驾车路线规划开发前配置,显示基本地图,实时定位等查看之前代码,此博客紧接上一博客:https://blog.csdn.ne ...
（六）高德地图之驾车路线规划
在项目中用到地图的地方往往会有导航功能,那么这一节将介绍一下使用高德地图来实现驾车路线规划的功能. 首先来两张示例图供参考: 接下来还是直接上代码更直观建立DriverRou ...
百度地图的驾车路线规划
属性属性名类型默认值描述 location String, Point, None location表示检索区域,其类型可为空.坐标点或城市名称的字符串.当参数为空时,检索位置由当前地图中心点 ...

uniapp--腾讯地图驾车路线规划

腾讯地图驾车路线规划

uniapp--腾讯地图驾车路线规划相关推荐

最新文章

热门文章