iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现导航功能的操作步骤
  • 284
分享到

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

2024-04-02 19:04:59 284人浏览 独家记忆
摘要

一、效果图 二、操作步骤 1、申请腾讯地图key——地址 2、小程序后台添加腾讯插件——开发文档 3、小程序代码app.JSON设置 let plugin = requi

一、效果图

二、操作步骤

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:"地址:要去的地点详细描述"
  })
  }
 })
 }
})

总结

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

--结束END--

本文标题: 微信小程序实现导航功能的操作步骤

本文链接: https://www.lsjlt.com/news/121372.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现导航功能的操作步骤
    一、效果图 二、操作步骤 1、申请腾讯地图key——地址 2、小程序后台添加腾讯插件——开发文档 3、小程序代码app.json设置 let plugin = requi...
    99+
    2022-11-11
  • 微信小程序动态设置导航栏标题的实现步骤
    目录前言使用配置文件配置导航栏标题实现步骤效果图总结前言 哈喽大家好,本期是微信小程序专栏第十八期。本期主要内容是动态设置导航栏标题。导航栏是页面最顶部的一块区域。本期使用两种方法来...
    99+
    2023-02-09
    微信小程序动态设置导航栏标题怎么设置 微信小程序标题在哪设置 微信小程序自定义导航栏
  • 如何使用PHP实现微信小程序的导航功能?
    如何使用PHP实现微信小程序的导航功能?随着微信小程序的火热,在开发微信小程序时,导航功能是一个很常见且必要的功能。本文将介绍如何使用PHP实现微信小程序的导航功能,并提供具体的代码示例。获取用户当前位置在微信小程序中使用地图导航功能,首先...
    99+
    2023-10-27
    PHP 微信小程序 导航功能
  • 怎么在微信小程序中实现一个导航功能
    本篇文章给大家分享的是有关怎么在微信小程序中实现一个导航功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。操作步骤申请腾讯地图key——地址小程序后台添加腾讯插件——开发文档小...
    99+
    2023-06-08
  • 微信小程序实现页面导航与传参功能详解
    目录一、页面导航概述分类声明式导航导航到tabBar页面导航到非tabBar页面后退导航编程式导航导航到tabBar页面导航到非tabBar页面后退导航导航传参声明式导航传参编程式导...
    99+
    2022-11-13
    微信小程序页面导航 微信小程序传参
  • 微信小程序实现左侧导航栏
    本文实例为大家分享了微信小程序实现左侧导航栏的具体代码,供大家参考,具体内容如下 wxml <view class="content">       <view c...
    99+
    2022-11-13
  • 微信小程序实现侧边导航栏
    本文实例为大家分享了微信小程序实现侧边导航栏的具体代码,供大家参考,具体内容如下 效果图 wxml <view class='productNav'>   <!-...
    99+
    2022-11-13
  • 微信小程序如何实现MUI导航栏透明渐变功能
    这篇文章主要为大家展示了“微信小程序如何实现MUI导航栏透明渐变功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何实现MUI导航栏透明渐变功能”这...
    99+
    2022-10-19
  • 微信小程序中如何实现导航栏滑动定位功能
    这篇文章给大家分享的是有关微信小程序中如何实现导航栏滑动定位功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现的效果实现的原理1. 通过对scroll的监听获取滚动条的scr...
    99+
    2022-10-19
  • 微信小程序实现自定义导航栏
    本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 1、要实现自定义导航栏,首先得在全局进行相关配置 app.json页面 "window": {    ...
    99+
    2022-11-13
  • 微信小程序自定义渐变的tabbar导航栏功能
    做为自己的一个小笔记,以免后面再用到 1,在需要自定义的界面的json文件中加入下面代码 "navigationStyle": "custom&...
    99+
    2022-11-13
  • 微信小程序如何实现tabBar底部导航
    这篇文章主要介绍微信小程序如何实现tabBar底部导航,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!微信小程序tabBar底部导航中文注解api,信小程序tabBar就是app底部的...
    99+
    2022-10-19
  • 微信小程序如何实现侧边导航栏
    今天小编给大家分享一下微信小程序如何实现侧边导航栏的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。效果图wxml<vie...
    99+
    2023-07-02
  • 微信小程序如何实现左侧导航栏
    这篇“微信小程序如何实现左侧导航栏”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序如何实现左侧导航栏”文章吧。wxm...
    99+
    2023-07-02
  • 微信小程序系列之如何实现自定义顶部导航功能
    这篇文章主要为大家展示了“微信小程序系列之如何实现自定义顶部导航功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序系列之如何实现自定义顶部导航功能”这...
    99+
    2022-10-19
  • 微信小程序怎么实现自定义导航栏
    今天小编给大家分享一下微信小程序怎么实现自定义导航栏的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1、要实现自定义导航栏,首...
    99+
    2023-06-29
  • 微信小程序实现页面导航的方法详解
    目录一.页面导航二.声明式导航1.导航到tabBar页面2.导航到非tabBar页面3.后退导航三.编程式导航1.导航到tabBar页面2.导航到非tabBar页面3.后退导航四.导...
    99+
    2022-11-13
  • uniapp开发微信小程序自定义顶部导航栏功能实例
    目录自定义导航栏渐变色,先上效果重点来了,导航栏设置渐变色补充:更换图标总结自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏。 比...
    99+
    2022-11-13
    uniapp自定义导航栏高度 uniapp自定义顶部导航栏步骤 uniapp 自定义顶部导航
  • 小程序地图导航功能怎么实现
    今天小编给大家分享一下小程序地图导航功能怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。微信小程序的地址管理中,经常需...
    99+
    2023-06-26
  • 微信小程序实现书架小功能
    本文实例为大家分享了微信小程序实现书架功能的具体代码,供大家参考,具体内容如下 实现书架的功能,点击之后可以看pdf 1.设定点击事件 2.在点击事件里面 2.1下载 wx.down...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作