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

2024-04-18 14:35:03

一、效果图

二、操作步骤

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

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

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

let plugin = requirePlugin('routePlan');
let key = ''; //使用在腾讯位置服务申请的key
let 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

官网链接

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

//js
Page({
 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:"地址：要去的地点详细描述"
  })
  }
 })
 }
})

总结

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

详解微信小程序胶囊按钮返回|首页自定义导航栏功能

项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML  <view style="height:100%;position:fixed;width:100%;"> <scroll-v
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

1.wxml代码: <view class="page"> <import src="../../components/catering-item/catering-item.wxml" />  <view class='under_line'></view> <view class="body"> <view style='float: l
微信小程序地图导航功能实现完整源代码附效果图（推荐）

正文: 一:需求及效果图展示从后端API获取到起始地和目的地的经纬度坐标与地名.用户点击起始地便打开地图展示坐标的附近街景,路线,或者打开外部地图. 二:源代码 <block wx:for="{{data_2}}" wx:key='index' wx:if="{{data_2.length}}"> <view style='margin-left:10rpx;'>订单号: {{item.order_num}}</view> &l
微信小程序自定义导航隐藏和显示功能

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码:  <view class="navView" bi
微信小程序自定义底部导航带跳转功能

本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml  <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t
微信小程序系列之自定义顶部导航功能

具备基础 vue框架:vue官方文档 mpvue框架:mpvue官方文档全局配置 •找到全局的app.json文件,在配置中添加如下内容: "navigationStyle": "custom" "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", &q
微信小程序实现的动态设置导航栏标题功能示例

本文实例讲述了微信小程序实现的动态设置导航栏标题功能.分享给大家供大家参考,具体如下: 场景当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分.就需要开发者在页面加载的时候进行动态设置导航标题! 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({ title: '当前页面', //页面标题 success: () => {}, //接口调用成功的
微信小程序中进行地图导航功能的实现方法

前段时间一直都在做小程序做了两个月了,其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的,我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照! 好这次我们来开始我们的开发,其实微信小程序里面是不能导航的,原因是小程序的代码最多只能有1M,他的运行内存只能有10M,一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的,但是应用外呢! 我问过很多做安卓和IOS的同僚一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能,但是高

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

一、效果图

二、操作步骤

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

总结

相关推荐

随机推荐