用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序的百度地图获取地理位置

纸飞机 2018-3-8 09:38

分享者:michael_ouyang,原文地址 由于只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等等,因此我们还需要借助一些第三方的api来实现 下面,介绍使用百度地图的api来获取地位位置的信 ...

分享者:michael_ouyang,

原文地址


由于只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等等,因此我们还需要借助一些第三方的api来实现

下面,介绍使用百度地图的api来获取地位位置的信息。

1> 第一步:先到百度开放平台

http://lbsyun.baidu.com

申请ak

http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key


申请到ak后,在我的应用里就能查看到

2> 第二步:配置你的request合法域名
配置域名请到微信公众平台的后台里设置

3> 第三步:下载百度地图的api ,链接:

http://download.csdn.net/detail/michael_ouyang/9754015


解压后,里面有2个js文件,一个是常规没压缩的,另一个是压缩过的
PS:由于小程序项目文件大小限制为1M,建议使用压缩版的js文件!

4> 第四步:引入JS模块
在项目根目录下新建一个路径,将百度的js文件拷贝到新建的路径下,完成。
如下图所示,新建路径 "libs/bmap-wx" ,将 bmap-xw.min.js 文件拷贝至 "libs/bmap-wx" 路径下。

5> 第五步:在所需的js文件内导入js

  1. // 引用百度地图,注意:require传入一个相对路径
  2. var bmap = require('../../libs/bmap-wx/bmap-wx.js');

6> 第六步:编辑代码
注意:此处楼主使用的ak是随便写的,同学们需要自行申请!!!
xxx.wxml:

  1. 经度:{{longitude}}
  2. 纬度:{{latitude}}
  3. 地址:{{address}}

xxx.js:

  1. // 引用百度地图微信小程序JSAPI模块
  2. var bmap = require('../../libs/bmap-wx/bmap-wx.min.js');
  3. var wxMarkerData = []; //定位成功回调对象
  4. Page({
  5. data:{
  6. ak:"FHG7utZtdyXCCAb", //填写申请到的ak
  7. markers: [],
  8. longitude:'', //经度
  9. latitude:'', //纬度
  10. address:'' //地址
  11. },
  12. onLoad:function(options){
  13. var that = this;
  14. /* 获取定位地理位置 */
  15. // 新建bmap对象
  16. var BMap = new bmap.BMapWX({
  17. ak: that.data.ak
  18. });
  19. var fail = function(data) {
  20. console.log(data);
  21. };
  22. var success = function(data) {
  23. //返回数据内,已经包含经纬度
  24. console.log(data);
  25. //使用wxMarkerData获取数据
  26. wxMarkerData = data.wxMarkerData;
  27. //把所有数据放在初始化data内
  28. that.setData({
  29. markers: wxMarkerData,
  30. latitude: wxMarkerData[0].latitude,
  31. longitude: wxMarkerData[0].longitude,
  32. address: wxMarkerData[0].address
  33. });
  34. }
  35. // 发起regeocoding检索请求
  36. BMap.regeocoding({
  37. fail: fail,
  38. success: success
  39. });
  40. }
  41. })

7> 第七步:运行
注意:楼主的运行环境在模拟器上,在模拟器所获取到的定位是有一些误差的,如需测试真正的地理位置信息,还需要使用真机测试!!!

更多的百度地图api,可到github查看:

https://github.com/baidumapapi/wxapp-jsapi

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏