热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

怎么在微信小程序中实现一个导航功能

本篇文章给大家分享的是有关怎么在微信小程序中实现一个导航功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获

本篇文章给大家分享的是有关怎么在微信小程序中实现一个导航功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

操作步骤

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

以上就是怎么在微信小程序中实现一个导航功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程笔记行业资讯频道。


推荐阅读
  • 微信小程序地图实现展示线路的方法
    这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所 ... [详细]
  • 微信小程序实现简易计算器功能_javascript技巧
    这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
    小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
  • 微信小程序学习笔记-3-问题
    一些在开发微信小程序中常见的问题页面渲染  微信小程序中规定所有页面上渲染出来的数据,包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中, ... [详细]
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 如何查询zone下的表的信息
    本文介绍了如何通过TcaplusDB知识库查询zone下的表的信息。包括请求地址、GET请求参数说明、返回参数说明等内容。通过curl方法发起请求,并提供了请求示例。 ... [详细]
  • 人脸检测 pyqt+opencv+dlib
    一、实验目标绘制PyQT界面,调用摄像头显示人脸信息。在界面中,用户通过点击不同的按键可以实现多种功能:打开和关闭摄像头, ... [详细]
  • 推荐 :以数据驱动的方式讲故事
    直觉vs数据首先,你有思考过一个问题吗?当你的直觉与你所掌握的数据矛盾的时候,你是听从于直觉还是相信你所掌握的数据呢?201 ... [详细]
  • 65位高校教师接龙晒工资!给打算入高校的研究生们参考!
    本文转载自:募格学术|来源:麦可思研究综合整理自小木虫论坛前有清华教授被骗千万,后有某重点高校青年教师晒出月薪900的工资条, ... [详细]
  • h5+ 获取当前位置 并获取当前天气
    2019独角兽企业重金招聘Python工程师标准获取当前位置plus.geolocation.getCurrentPosition(function(p){获取天气接口mui ... [详细]
author-avatar
马丁乐_449
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有