微信小程序中进行地图导航功能的实现方法

前段时间一直都在做小程序做了两个月了，其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的，我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照！

好这次我们来开始我们的开发，其实微信小程序里面是不能导航的，原因是小程序的代码最多只能有1M，他的运行内存只能有10M，一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的，但是应用外呢！

我问过很多做安卓和IOS的同僚一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能，但是高德地图和腾讯地图都会有响应的SDK，可是小程序不同，尽管上面也有小程序的SDK但是也是没有用的，那么我们解决应用外调用的呢？

这就需要我们重新认识一下位置的API

wx.getLocation({
 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
 success: function(res) {
  var latitude = res.latitude
  var longitude = res.longitude
  wx.openLocation({
   latitude: latitude,
   longitude: longitude,
   name:"花园桥肯德基",
   scale: 28
  })
 }
})

然后就会出现下图

点击绿圆点点右下角的

然后是

最后就到了高德啦！

总结

以上所述是小编给大家介绍的微信小程序中进行地图导航功能的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序中上传图片并进行压缩的实现代码

    小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button

  • 微信小程序如何利用getCurrentPages进行页面传值

    微信小程序如何利用getCurrentPages进行页面传值

    最近刚赶完项目,利用空闲时间总结一下. 小程序的页面间传值 , 之前处理这种例如 a页面跳转b页面,在b页面进行一波操作 回到a页面 都是把b页面的操作的数据存到本地存储 wx.setStorageSync("b_data","b页面的数据") 在a页面是这样的 wx.getStorageSync("b_data") 但是这种方法怎么说呢 不利于操作 还会导致storage里面的数据非常混乱过一段时间鬼知道是什么,操作也麻烦 总之就是略low 后

  • 微信小程序实现指定显示行数多余文字去掉用省略号代替

    微信小程序实现指定显示行数多余文字去掉用省略号代替

    效果图 实现 wxml <view class='goods-details'> <text class='goods-details-title'>商品详情</text> <text catchtap='showAllAction' class='goods-details-content {{isShowAllContent ?"content-all" :"content-breif"}}'>你如安好,便是晴天你

  • 微信小程序文字显示换行问题

    小程序文字显示换行 问题 用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端 在线炒粉!!!' , url:'' },{ text:'' , url:'xxx.jpg', }]  解决 在拿到数据时先进行正则匹配处理,将换行替换为\n data.replace(/\n/g,'\\n') 然后在进行JOSN.parse就无问题啦. 还要注意的是要使用 text 标签输出才会有换行显示喔. ps:下面看下微信小程序文字超出自

  • 微信小程序onLaunch异步,首页onLoad先执行?

    本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了. //app.js App({ onLaunch: function () { console.log('onLaunch'); wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) {

  • 微信小程序动画（Animation）的实现及执行步骤

    简单总结一下微信动画的实现及执行步骤. 一.实现方式 官方文档是这样说的:①创建一个动画实例 animation.②调用实例的方法来描述动画.③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性. 因为小程序是数据驱动的,给这句话加上数字标注分为三步: 前两步是定义一个动画并设置都要干什么,然后把这个设置好的"规则"扔给界面上的某个元素,让它按照这个规则执行. 当然如果有多个元素的animation="{{ani}}",也都会执

  • 微信小程序 行的删除和增加操作实现详解

    微信小程序 行的删除和增加操作实现详解

    第一步:在项目的app.json中创建一个新的页面(页面名称英文,可自定义) 第二步:在创建的新页面中编写页面(注意bindtap属性值,因为是我们的js的函数方法名) 第三步:在对应的js里设置全局对象 在page中的data方法中初始赋值 对于页面中绑定事件创建对应的方法函数进行相关处理,使用push方法添加数组数据 ,pop方法删除数据,join方法数据间隔,考虑现实逻辑关系,在删除行的时候进行if的判断是否为空(注意每个方法后面逗号隔开,最后一个方法的大括号后可不用逗号) 完整图: 以上

  • 微信小程序中进行地图导航功能的实现方法

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

  • 微信小程序中显示html格式内容的方法

    微信小程序中显示html格式内容的方法

    前言 最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 准备工作: 首先我们下载wxParse github地址:https://github.com/icindy/wxParse 本地下载:http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar wx

  • 微信小程序中网络请求缓存的解决方法

    需求 提交小程序审核时,有一个体验测评,产品让我们根据小程序的体验测评报告去优化小程序. 其中有一项是网络请求的优化,给我们出了很大的难题. 文档中是这样解释的:3分钟以内同一个url请求不出现两次回包大于128KB且一模一样的内容 看到这个问题的时候,首先想到的是在响应头上加上cache-control,经过测试发现小程序并不支持网路请求缓存.搜索发现官方明确答复,小程序不支持网络请求缓存:wx.request不支持http缓存 既然官方不支持网络请求缓存,那只能自己想办法解决这个问题了. 先

  • 微信小程序中正确使用地图的方法实例

    微信小程序中正确使用地图的方法实例

    目录 前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市 总结 前言 今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

  • 微信小程序基于高德地图API实现天气组件(动态效果)

    ​在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图 ​小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.3 支持的动画效果 简单介绍下,动画由3个部分组成 一个是主

  • 微信小程序之高德地图多点路线规划过程示例详解

    微信小程序之高德地图多点路线规划过程示例详解

    调用 如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者 第二部,去控制台创建应用 即点击右上角的控制平台创建应用 创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包 第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程

  • uniapp在微信小程序中使用ECharts的方法

    uniapp在微信小程序中使用ECharts的方法

    今天使用uniapp集成Echarts,实现地图图表的展示 可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进 网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv

  • 在微信小程序中获取用户位置的详细过程

    在微信小程序中获取用户位置的详细过程

    目录 前言 wx.getLocation 腾讯位置服务 总结 前言 最近在学习微信小程序,在学习的过程中,有很多好玩的 API,经常点外卖的同学可能在小程序中遇到过,比如:某团.某了么都是有显示当前用户位置信息的,那么今天给大家介绍如何获取当前用户位置信息,听上去很不错,其实实践起来也不是很难. wx.getLocation 首先,我们需要来认识一下 wx.getLocation 这个 API 方法,我们先看看 微信官方文档 中是怎么说的 看我划红线的地方就可以了,文档中明确的表示这个 API

  • 微信小程序中的swiper组件详解

    微信小程序中的swiper组件 微信小程序中的swiper组件真的是简单方便 提供了页面中图片文字等滑动的效果 <swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper> 这里的就是一个滑块视图容器:而就是你希望滑动的东西,可以是文字也可以是image 其中swipe

随机推荐