微信小程序如何利用接口返回经纬计算实际位置并且进行导航功能【下】

本文主要是介绍微信小程序如何利用接口返回经纬计算实际位置并且进行导航功能【下】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如果要在微信小程序内部导航的话可以使用wx.navigateToMiniProgram方法来打开腾讯地图小程序，并传递目的地的经纬度信息。

1.如何获取高精地址

2.如何调起地图

3.实现效果

navigateToDestination: function() {let that = this;var latitude = parseFloat(that.data.latitude);var longitude = parseFloat(that.data.longitude);var address = that.data.address;// 打开腾讯地图小程序并传递目的地经纬度信息wx.navigateToMiniProgram({appId: '你的腾讯地图小程序AppID',path: 'pages/map/index', // 小程序内跳转到地图页面extraData: {latitude: latitude,longitude: longitude,name: address, // 目的地名称address: address // 目的地地址},success(res) {console.log('打开腾讯地图小程序成功');},fail(res) {console.log('打开腾讯地图小程序失败', res.errMsg);}});
}

需要自己去申请一个腾讯地图小程序，所以本文使用调起外部地图的方式进行路线导航。

1.如何获取高精地址

 wx.getLocation({type: 'wgs84',success: function(res) {var latitude = res.latitude; // 使用 res.latitude 获取经度值var longitude = res.longitude; // 使用 res.longitude 获取纬度值console.log('Latitude:', latitude);console.log('Longitude:', longitude);var location = latitude + ',' + longitude; // 构建经纬度字符串wx.request({url: 'https://apis.map.qq.com/ws/geocoder/v1/',data: {location: location, // 使用经纬度字符串作为参数key: 'OH6BZ-MKJHQ-2565Z-B7IP2-JD5N6-TYB54',get_poi: 0},success: function(res) {console.log('Geocoding API response:', res);var address = res.data.result.address;console.log('Address:', address);that.setData({address: address,kmnum: options.km});}});}});

wx.request()：发起一个网络请求。

url: 'https://apis.map.qq.com/ws/geocoder/v1/'：指定请求的URL，这里是腾讯地图的逆地理编码API接口。

data: {...}：设置请求的参数。

location: location：将经纬度字符串作为参数传递给API，以获取该位置的地址信息。
key: 'OH6BZ-MKJHQ-2565Z-B7IP2-JD5N6-TYB54'：提供有效的腾讯地图API密钥。
get_poi: 0：设置是否返回周边POI（兴趣点）信息。这里设置为0表示不返回周边POI信息。

其中呢address是获取到的地址，因为下面调起导航需要，所以我们上面创建变量先进行存储， kmnum: options.km的options.km是上文的距离，通过跳转传参得来，不明白的可看上文https://blog.csdn.net/m0_71966801/article/details/134083967

这里是跳转传参的方法：

shops(e){console.log(e);console.log(e.currentTarget.dataset.id);console.log(e.currentTarget.dataset.km);wx.navigateTo({url: '/pages/countrystore/countrystore?id=' + e.currentTarget.dataset.id + '&km=' + e.currentTarget.dataset.km,})
},

2.如何调起地图

 navigateToDestination: function() {let that = thisvar latitude =  parseFloat(that.data.latitude);var longitude =  parseFloat(that.data.longitude);var address = that.data.address;wx.openLocation({latitude: latitude,longitude: longitude,name: that.data.address, // 替换为实际的目的地名称address: address // 替换为实际的目的地地址});},//let that = this：将当前上下文对象保存到变量that中，以便在后续代码中使用。var latitude =  parseFloat(that.data.latitude);：从that.data中获取latitude属性的值，并通过parseFloat()函数将其转换为浮点数类型。这里假设latitude是一个经度值。var longitude =  parseFloat(that.data.longitude);：从that.data中获取longitude属性的值，并通过parseFloat()函数将其转换为浮点数类型。这里假设longitude是一个纬度值。var address = that.data.address;：从that.data中获取address属性的值，并将其保存到address变量中。这里假设address是目的地的地址信息。wx.openLocation()：调用微信小程序的openLocation方法打开地图页面，并显示目标位置。latitude和longitude：指定目标位置的纬度和经度。
name: that.data.address：设置目标位置的名称，即目的地的名称。
address: address：设置目标位置的详细地址。
该函数通过调用wx.openLocation()方法实现了跳转到地图页面，并自动定位到指定的目的地位置。用户可以在地图页面查看目的地的位置信息，并进行导航操作。