2025年微信小程序实现导航功能

科技前沿 • 2025-03-03 07:42 • 阅读 59

大家好，我是讯享网，很高兴认识大家。

通过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.name var 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 }) } }) }

最终效果如下图：

2025年微信小程序实现导航功能

相关推荐