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


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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
封装微信小程序http拦截器过程解析
Aug 13 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使用DES进行加密与解密的方法详解
2013/06/06 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
JavaScript实现职责链模式概述
2018/01/25 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
优秀中专生推荐信
2013/11/17 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL
app场景下uniapp的扫码记录
2022/07/23 Java/Android