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


Posted in Javascript onJune 29, 2018

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

      好这次我们来开始我们的开发,其实微信小程序里面是不能导航的,原因是小程序的代码最多只能有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
  })
 }
})

   然后就会出现下图

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

     点击绿圆点点右下角的

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

   然后是

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

  最后就到了高德啦!

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

总结

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

Javascript 相关文章推荐
JavaScript mapreduce工作原理简析
Nov 25 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
vue增删改查的简单操作
Jul 15 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 #Javascript
vue底部加载更多的实例代码
Jun 29 #Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 #Javascript
vue项目打包后打开页面空白解决办法
Jun 29 #Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 #Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 #Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 #Javascript
You might like
php上传、管理照片示例
2006/10/09 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
详解Vue之事件处理
2020/07/10 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python进程间通信之共享内存详解
2017/10/30 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
创业女性典型材料
2014/05/02 职场文书
英文演讲稿
2014/05/15 职场文书
法律系毕业生求职信
2014/05/28 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
工程催款通知书
2015/04/17 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL