微信小程序实现导航功能的操作步骤

一、效果图

二、操作步骤

1、申请腾讯地图key——地址

2、小程序后台添加腾讯插件——开发文档

3、小程序代码app.json设置

let plugin = requirePlugin('routePlan');
    let key = '';
     //使用在腾讯位置服务申请的keylet referer = '';
 //调用插件的app的名称let endPoint = JSON.stringify({
 //终点 'name': '吉野家(北京西站北口店)', 'latITude': 39.89631551, 'longitude': 116.323459711}
    );
wx.navigateTo({
     url: 'plugin://routePlan/index?key=' + key + '&
    referer=' + referer + '&
endPoint=' + endPoint}
    );
    

或者也可以使用小程序内置地图导航

使用小程序内置地图wx.getLocation和wx.oPEnLocation

官网链接

//wXMlbutton type="default" bindtap="openMap">
    打开地图/button>
    

//jsPage({
 data: {
 }
, openMap: function () {
 wx.getLocation({
  type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  success: function (res) {
      // success  console.LOG(res.latitude);
      console.log(res.longitude);
  wx.openLocation({
   latitude: res.latitude, // 纬度，范围为-90~90，负数表示南纬   longitude: res.longitude, // 经度，范围为-180~180，负数表示西经   scale: 28, // 缩放比例   name:"要找的地方名字（某某饭店）",   address:"地址：要去的地点详细描述"  }
)  }
 }
) }
}
    )

总结

到此这篇关于微信小程序实现导航功能的文章就介绍到这了,更多相关微信小程序导航功能内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 微信小程序中进行地图导航功能的实现方法
• 详解微信小程序胶囊按钮返回|首页自定义导航栏功能
• 微信小程序自定义导航隐藏和显示功能
• 微信小程序自定义底部导航带跳转功能
• 微信小程序实现的动态设置导航栏标题功能示例
• 微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
• 微信小程序系列之自定义顶部导航功能
• 微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
• 微信小程序地图导航功能实现完整源代码附效果图（推荐）
• 微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！