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


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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Javascript 篱式条件判断
Aug 22 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
javascript时间函数大全
Jun 30 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP时间戳使用实例代码
2008/06/07 PHP
php 时间计算问题小结
2009/01/04 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
热爱祖国演讲稿
2014/05/04 职场文书
管理工程专业求职信
2014/08/10 职场文书
单位更名证明
2015/06/18 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书