微信小程序开发之如何获取地理位置和进行地图导航
白羽 2018-07-18 来源 :网络 阅读 5622 评论 0

摘要:本文将带你了解微信小程序开发之如何获取地理位置和进行地图导航,希望本文对大家学微信有所帮助。



一.获取地理位置由于小程序只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等,我们利用百度地图的api来获取地位位置。

文档 1.申请ak //lbsyun.baidu.com/index.php?title=wxjsapi/guide/key2.下载百度地图的api ,

链接://download.csdn.net/detail/michael_ouyang/9754015 解压后,里面有2个js文件,一个是常规没压缩的,


另一个是压缩过的 PS:由于小程序项目文件大小限制为1M,建议使用压缩版的js文件!用5kb那个js 

3.引入JS模块放在utils下 

4.在所需的js文件内导入js // 引用百度地图,注意:require传入一个相对路径 var bmap = require('../../utils/bmap-wx/bmap-wx.js');5.编辑代码 .wxss代码为      经度:{{longitude}}      纬度:{{latitude}}      地址:{{address}}      城市:{{cityInfo.city}}    .js代码为:var bmap = requir('../../utils/bmap-wx/bmap-wx.min.js');var wxMarkerData = [];  //定位成功回调对象  Page({  data: {    ak: "FHG7utZtdyXN2", //填写申请到的ak      markers: [],    longitude: '',   //经度      latitude: '',    //纬度      address: '',     //地址      cityInfo: {}     //城市信息    },  onLoad: function (options) {    var that = this;    /* 获取定位地理位置 */    // 新建bmap对象       var BMap = new bmap.BMapWX({      ak: that.data.ak    });    var fail = function (data) {      console.log(data);    };    var success = function (data) {      //返回数据内,已经包含经纬度        console.log(data);      //使用wxMarkerData获取数据        wxMarkerData = data.wxMarkerData;      //把所有数据放在初始化data内        that.setData({        markers: wxMarkerData,        latitude: wxMarkerData[0].latitude,        longitude: wxMarkerData[0].longitude,        address: wxMarkerData[0].address,        cityInfo: data.originalData.result.addressComponent      });    }    // 发起regeocoding检索请求       BMap.regeocoding({      fail: fail,      success: success    });  }}) 

6.运行 注意:楼主的运行环境在模拟器上,在模拟器所获取到的定位是有一些误差的,如需测试真正的地理位置信息,还需要使用真机测试!!!结果二.进行地图导航微信小程序里面是不能导航的,原因是小程序的代码最多只能有1M,他的运行内存只能有10M,一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的,但是应用外呢!关于APP开发,一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能,但是高德地图和腾讯地图都会有响应的SDK,可是小程序不同,我们该如何在小程序外调用导航功能呢?打开小程序中关于位置的API, 1.wx.getLocation(OBJECT) 获取当前的地理位置、速度。 2.wx.chooseLocation(OBJECT) 打开地图选择位置。 3.wx.openLocation(OBJECT) 使用微信内置地图查看位置。查看长沙理工大学

 具体实现代码为: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    })  }})点击绿点出现,选择地图 选择手机上的地图,然后就跳到了对应的地图APP上,实现了应用外调用导航功能。    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 7 不喜欢 | 5
看完这篇文章有何感觉?已经有12人表态,58%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved