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


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里使用Dom操作Xml
Jan 22 Javascript
javascript eval函数深入认识
Feb 21 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
javascript简易画板开发
Apr 12 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 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
提问的智慧
2006/10/09 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python模拟事件触发机制详解
2018/01/19 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
简单了解django索引的相关知识
2019/07/17 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
python 实现return返回多个值
2019/11/19 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
战略合作意向书范本
2014/04/01 职场文书
软件售后服务承诺书
2014/05/21 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
怎样写观后感
2015/06/19 职场文书
优秀新员工事迹材料
2019/05/13 职场文书