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

 

前言：由於小程序只提供了外面一個獲取地理位置、速度的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