微信小程序实现定位及到指定位置导航的示例代码

时间:2021-05-18

一:实现定位及到指定位置导航所需组件及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-locationstyle="width: 100%; height: 300px;"></map></view><view><button type="primary" bindtap="navigate">导航</button></view>

2:js

//jsPage({/** * 页面的初始数据 */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})}})}})

根据如上即可实现自身定位及到指定位置的导航,如下:




以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章