微信小程序调用地图设置起点终点导航

本文主要讲一下如何使用微信内置地图设置起点终点并导航

传送门：微信小程序API~位置信息

准备工作：在app.json文件中配置可获得当前位置的许可

  "permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示" }},

第一步：获取起点的位置（设备所在的位置）

wx.getLocation({//这里的type有两种类型，详情请点击最上方的传送门查看type: 'gcj02',success :(res)=> {//获取当前经纬度const latitude = res.latitudeconst longitude = res.longitude//获取当前速度const speed = res.speed//位置的精确度const accuracy = res.accuracy}
})

注意，在代码的编写过程中，一定要使用箭头函数
微信小程序的api中并没有使用箭头函数，但经过我的多次使用，发现使用箭头函数更加省心，不会因为某些特定原因使程序出错，所以之后的代码我都会使用箭头函数
第二步：在wx.getLocation的回调函数success中使用wx.openLocation

wx.getLocation({type: 'gcj02',//参数类型，让获取的数据可以被getLocation函数使用success :(res)=> {//这里是起点信息const latitude = res.latitude const longitude = res.longitudeconst speed = res.speedconst accuracy = res.verticalAccuracy//这是从终点的经纬度，将他传给wx.openLocation的参数中const endlat = Number(this.data.latitude)const endlon = Number(this.data.longitude)wx.openLocation({//这里的两个参数决定了终点在哪latitude: endlat,longitude: endlon,scale: 18})}})

这里有个大坑，传参数的时候，一定要传Number类型的参数，不然会报错，这里是将终点的经纬度转成Number类型的方法

 const endlat = Number(this.data.latitude)const endlon = Number(this.data.longitude)

微信小程序调用地图设置起点终点导航相关推荐

微信小程序调用地图和跟据经纬度打开手机地图导航
微信小程序调用地图和跟据经纬度打开手机地图导航第一步:输入地址位置 wxml<button bindtap="onChooseLocation">打开地图</b ...
微信小程序调用地图接口，实现定位
1. demo01.wxml  <view><button type="default" bindtap="get_l ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
微信小程序调用高德，腾讯地图app
在微信小程序中出现商家位置需要导航,只要直接调用微信小程序api wx.openLocation({latitude: lat, longitude: lon, scale: 16, name: ad ...
right 微信小程序_微信小程序高德地图API
本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示. 微信小程序目前支持百度地图.高德地图.腾讯地图.用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应 ...
微信小程序---高德地图API
本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示. 微信小程序目前支持百度地图.高德地图.腾讯地图.用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应 ...
微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
uniapp微信小程序使用地图选点插件
uniapp使用腾讯位置服务地图选点文章目录 uniapp使用腾讯位置服务地图选点效果图 1. 在公众平台申请插件 2. 引入插件 3. 设置定位授权: 4. 使用插件效果图 1. 在公众平台申 ...

微信小程序调用地图设置起点终点导航

微信小程序调用地图设置起点终点导航相关推荐

最新文章

热门文章