【小程序爬坑之路】获取地理位置信息

 

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

小程序关于地理位置文档

api：https://developers.weixin.qq.com/miniprogram/dev/api/location.html,

组件：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

实现：

一、使用百度地图的api来获取地理位置的信息

第一步：先去百度开放平台申请akhttp://lbsyun.baidu.com

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

http://lbsyun.baidu.com/apiconsole/key?application=key

第二步：创建应用

第三步：获取密钥（AK）(输入小程序appid)

第四步：在小程序公众平台配置request合法域名（https://api.map.baidu.com）

第五步：下载百度地图api

第六步：在所需的js文件内导入js

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

第七步：编辑代码

wxml:

1. <view>
2. <viwe>经度：{{longitude}}</viwe>
3. <view>纬度：{{latitude}}</view>
4. <view>地址：{{address}}</view>
5. </view>

js：

// 引用百度地图微信小程序JSAPI模块   
var bmap = require('../../libs/bmap-wx/bmap-wx.min.js');  
var wxMarkerData = [];  //定位成功回调对象  
Page({  
  data:{  
    ak:"FHG7utZtdyXCCAb",   //填写申请到的ak  
    markers: [],  
    longitude:'',   //经度  
    latitude:'',    //纬度  
    address:''      //地址  
  },  
  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  
        });   
    }   
    // 发起regeocoding检索请求   
    BMap.regeocoding({   
        fail: fail,   
        success: success  
    });       
  }  
})  

 

 参考文档:http://www.wxapp-union.com/portal.php?mod=view&aid=1370

二、使用腾讯地图的api来获取地理位置的信息（和百度地图差不太多）

①申请开发者密钥

②下载微信小程序JavaScriptSDK

③设置→开发设置→request:https://apis.map.qq.com

④导入js

⑤编辑代码

 参考文档：https://www.jianshu.com/p/f9d1e1e91808

http://lbs.qq.com/qqmap_wx_jssdk/index.html

三、使用高德地图的api来获取地理位置的信息（和百度地图差不太多）

源码参考：https://github.com/brandonxiang/weapp-map