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

如果要在微信小程序内部导航的话可以使用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 = this
    var 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()方法实现了跳转到地图页面,并自动定位到指定的目的地位置。用户可以在地图页面查看目的地的位置信息,并进行导航操作。

3.实现效果

QQ视频20231027215659

相关推荐
捕鲸叉8 分钟前
MVC(Model-View-Controller)模式概述
开发语言·c++·设计模式
wrx繁星点点24 分钟前
享元模式:高效管理共享对象的设计模式
java·开发语言·spring·设计模式·maven·intellij-idea·享元模式
真的想不出名儿27 分钟前
Java基础——反射
java·开发语言
小飞哥liac34 分钟前
微信小程序的组件
微信小程序
努力编程的阿伟1 小时前
【Java SE语法】抽象类(abstract class)和接口(interface)有什么异同?
java·开发语言
清灵xmf1 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨1 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
包饭厅咸鱼1 小时前
QML----复制指定下标的ListModel数据
开发语言·数据库
GDAL1 小时前
npm入门教程1:npm简介
前端·npm·node.js
bryant_meng1 小时前
【python】Distribution
开发语言·python·分布函数·常用分布