微信小程序实现导航功能

通过getLocation获得定位
必须要把你的地址转为实际的经纬度才能实现导航功能，因此要使用地理编码API。我这里使用的是高德地图地理编码API，请申请微信小程序，下图是申请后结果

<!--wxml-->
<!--我这里的item携带了地址哦-->
<view data-item="{{item}}" catchtap="daohang">查看定位</view>

//获得从前端传来的地址
daohang:function(e){var that =this;console.log(e.currentTarget.dataset.item)var name=e.currentTarget.dataset.item.namevar address=e.currentTarget.dataset.item.address;that.loadGEO(address,name)},
//地址转为经纬度
loadGEO:function(address,name){wx.request({url: 'https://restapi.amap.com/v3/geocode/geo?parameters',data:{key: '你的key',address:address,s: "rsx",city:cityname,sdkversion: "sdkversion",logversion: "logversion"},success(res){console.log(res.data)var address =res.data.geocodes[0].formatted_address//返回的是一个类似这样的"xxx.xx,xx.xxx"的字符串经纬度,所以要进行拆分把经度和纬度分开var arr=res.data.geocodes[0].location.split(",");console.log(arr)//要转化为数字，这里用Number()var latitude=Number(arr[1]);var longitude =Number(arr[0]);console.log(latitude,longitude)//这里会打开地图wx.openLocation({latitude: latitude,//,latitude,longitude:longitude ,//longitude,name: name,//定位名称address:address,//具体地址scale: 15})}})
}

最终效果如下图：

微信小程序实现导航功能相关推荐

微信小程序地址导航功能实现详解
微信小程序地址导航功能 1. 微信小程序地址导航功能通过点击地址或者导航来调用微信小程序自带的api来获取到自己的位置,并且进行跳转,然后再在新的页面里打开外部程序,例如高德地图或者百度地图,打开之后 ...
微信小程序-路线规划,地图导航功能基于高德地图API
主要实现微信小程序中的地图路线规划和地图导航功能小程序二维码: 更新 2018年4月18日:新增限行限号查询. 2018年5月7日:新增快递查询,模板消息发送. 准备 1.在http://lbs.a ...
微信小程序实现地图导航功能
先获取当前地址可参考以下链接 https://blog.csdn.net/weixin_42272544/article/details/88599214 html代码 <!--index.w ...
微信小程序：地图导航功能实现完整源代码附效果图，讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:需求及效果图展示从后端API获取到起始地和目的地的经纬度坐标与地名.用户点击起始地便打开地图展示 ...
微信小程序实现附近医院、加油站、景点和地图路线导航功能（超详细）（附源码）
文章目录效果图 API获取获取Key 微信小程序后台配置代码 app.json wxml代码 wxss代码 JS代码其他留言效果图 API获取使用腾讯位置服务提供的api 点击链接注册或 ...
微信小程序实现附近加油站和地图路线导航功能
目录效果图 API获取微信小程序后台配置代码 app.json wxml代码 wxss代码 JS代码二次开发留言效果图 API获取本项目使用的是腾讯位置服务提供的api,点击链接注册或登 ...
页面生命周期_微信小程序的生命周期学习笔记-应用篇
在我们学习微信小程序的过程当中,我们会参考很多资料.在这些资料中,我们经常能够看到"生命周期"四个字,在前面的课程中也提到过.在这里做一个说明. 生命周期是一类函数的统称,这些函数 ...
android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
小程序长按api_微信小程序API相关知识科普
微信小程序API(Application Programming Interface),即应用程序编程接口.API是一种接口函数,把函数封装起来,给开发者,这样好多的功能就不需要你去实现了,只要会调用 ...

微信小程序实现导航功能

微信小程序实现导航功能相关推荐

最新文章

热门文章