微信小程序的百度地图获取地理位置：微信小程序教程系列15

r囧r小猫 2021-12-03 13:15 677阅读 0赞

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

![20170214134733484][]

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

1> 第一步：先到百度开放平台http://lbsyun.baidu.com申请ak  
[http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key][http_lbsyun.baidu.com_index.php_title_wxjsapi_guide_key]

![20170214134136679][]

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

![20170214134207932][]

2> 第二步：配置你的request合法域名

配置域名请到微信公众平台的后台里设置

![20170214134251839][]

3> 第三步：下载百度地图的api ，链接：[http://download.csdn.net/detail/michael\_ouyang/9754015][http_download.csdn.net_detail_michael_ouyang_9754015]

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

![Center][]

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

![Center 1][]

5> 第五步：在所需的js文件内导入js  
// 引用百度地图，注意：require传入一个相对路径  
var bmap = require('../../libs/bmap-wx/bmap-wx.js');

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

<view>
    	<viwe>经度：{
       {longitude}}</viwe>
    	<view>纬度：{
       {latitude}}</view>
    	<view>地址：{
       {address}}</view>
    	<view>城市：{
       {cityInfo.city}}</view>
    </view>

xxx.js：

// 引用百度地图微信小程序JSAPI模块 
    var bmap = require('../../libs/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
        });     
      }
      
    })

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

![20170215141316369][]

更多的百度地图api，可到github查看：[https://github.com/baidumapapi/wxapp-jsapi][https_github.com_baidumapapi_wxapp-jsapi]

[20170214134733484]: /images/20211203/485e605502b8431f9a6b9393cd85bf27.png
[http_lbsyun.baidu.com_index.php_title_wxjsapi_guide_key]: http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key
[20170214134136679]: /images/20211203/b67d6cb8c58d4c1793f84475f8f91afe.png
[20170214134207932]: /images/20211203/453b141a6f0a42c99e8ee0b43577e01a.png
[20170214134251839]: /images/20211203/4cb25d36d713421f97fed55e816da84d.png
[http_download.csdn.net_detail_michael_ouyang_9754015]: http://download.csdn.net/detail/michael_ouyang/9754015
[Center]: /images/20211203/01a49fa7d6fd4d6aa3e5870f023fa032.png
[Center 1]: /images/20211203/847d9b3eb619402fa6f03a501e848eb2.png
[20170215141316369]: /images/20211203/37b50d96343a42b788925d6f66ea553a.png
[https_github.com_baidumapapi_wxapp-jsapi]: https://github.com/baidumapapi/wxapp-jsapi