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


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基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
async/await地狱该如何避免详解
May 10 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
vue中是怎样监听数组变化的
Oct 24 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 过滤器实现代码
2010/08/09 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
python多线程http下载实现示例
2013/12/30 Python
python获取图片颜色信息的方法
2015/03/18 Python
打包发布Python模块的方法详解
2016/09/18 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python构建深度神经网络(续)
2018/03/10 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
求职信模版
2013/11/30 职场文书
关爱残疾人标语
2014/06/25 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书