微信小程序实现定位及到指定位置导航的示例代码
2019-08-20 10:14
1846 查看
一:实现定位及到指定位置导航所需组件及API
1:组件:map(地图组件)
2:API:wx.getLocation(Object object)(获取当前的地理位置、速度),wx.openLocation(Object object)(使用微信内置地图查看位置)
二:代码实现
1:wxml
<view> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;" > </map> </view> <view> <button type="primary" bindtap="navigate">导航</button> </view>
2:js
//js Page({ /** * 页面的初始数据 */ data: { //设置标记点 markers: [ { iconPath: "/images/ljx.png", id: 4, latitude: 31.938841, longitude: 118.799698, width: 30, height: 30 } ], //当前定位位置 latitude:'', longitude: '', }, navigate() { ////使用微信内置地图查看标记点位置,并进行导航 wx.openLocation({ latitude: this.data.markers[0].latitude,//要去的纬度-地址 longitude: this.data.markers[0].longitude,//要去的经度-地址 }) }, onLoad() { //获取当前位置 wx.getLocation({ type: 'gcj02', success: (res) => { console.log(res) this.setData({ latitude: res.latitude, longitude: res.longitude }) } }) } })
根据如上即可实现自身定位及到指定位置的导航,如下:
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 微信小程序实现获取自己所处位置的经纬度坐标功能示例
- 微信小程序如何实现下拉框效果?(代码示例)
- 微信小程序实现全局搜索代码高亮的示例
- 微信小程序实现两边小中间大的轮播效果的示例代码
- java实现微信小程序登录态维护的示例代码
- 微信小程序实现图片懒加载的示例代码
- 微信小程序实现卡片左右滑动效果的示例代码
- 微信小程序中实现手指缩放图片的示例代码
- 微信小程序websocket聊天室的实现示例代码
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
- android实现定位与目的地的导航示例代码
- 微信小程序实现底部导航栏目示例
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- 点击导航,滑动到网页中的指定位置(JS实现滑动锚点定位)
- 微信小程序实现折线图的示例代码
- 微信小程序实现人脸识别登陆的示例代码
- 微信小程序实战篇之购物车的实现代码示例
- 微信小程序实现获取准确的腾讯定位地址功能示例
- [置顶] 微信文章webview记录上次访问位置的实现原理和代码,webview记录并定位到上次访问位置