微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

微信小程序如何获取地理位置和进行地图导航

一.获取地理位置

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

文档 


1.申请ak 
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

2.下载百度地图的api ,链接http://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代码

  1. <view>
  2. <viwe>经度:{{longitude}}</viwe>
  3. 地址:{{address}}

.js代码为:

var bmap = requir('../../utils/bmap-wx/bmap-wx.min.js');
  • Page({
  • ak "FHG7utZtdyXN2", //填写申请到的ak
  • longitude'' //经度
  • address //地址
  • },
  • that this;
  • // 新建bmap对象
  • ak that.dataak
  • fail {
  • };
  • );
  • wxMarkerData datawxMarkerData;
  • thatsetData({
  • latitude[0].latitude cityInfooriginalDataresultaddressComponent
  • }
  • BMapregeocoding({
  • success success
  • }
  • })
  • 6.运行 
    注意:楼主的运行环境在模拟器上,在模拟器所获取到的定位是有一些误差的,如需测试真正的地理位置信息,还需要使用真机测试!!!

    结果

    二.进行地图导航

    微信小程序里面是不能导航的,原因是小程序代码最多只能有1M,他的运行内存只能有10M,一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的,但是应用外呢!

    关于APP开发,一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能,但是高德地图和腾讯地图都会有响应的SDK,可是小程序不同,我们该如何在小程序调用导航功能呢?

    打开小程序中关于位置的API, 
    1.wx.getLocation(OBJECT) 获取当前的地理位置、速度。 
    2.wx.chooseLocation(OBJECT) 打开地图选择位置。 
    3.wx.openLocation(OBJECT) ​使用微信内置地图查看位置。

    查看长沙理工大学 
    具体实现代码为:

      type'gcj02'//返回可以用于wx.openLocation的经纬度
    
  • latitude reslatitude
  • wxopenLocation latitude latitude})
  • })
  • 点击绿点出现如图:

    选择地图 


    选择手机上的地图,然后就跳到了对应的地图APP上,实现了应用外调用导航功能

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。