看文章 掃一掃 領紅包哦

可以看到：小程式只提供了一個獲取地理位置、速度的api，並沒有關於地位位置的資訊等，因此需要藉助一些第三方的api來實現。

實現方法一：百度地圖API

1.登入百度開放平臺http://lbsyun.baidu.com並申請AK，填寫相關資訊。

2.在專案根目錄下新建一個路徑，下載百度地圖微信小程式JavaScript API，解壓後得到 bmap-wx.js 檔案（解壓後有bmap-wx.js和bmap-wx.min.js兩種檔案，考慮到輕量化，建議用壓縮版的bmap-wx.min.js），將其拷貝到新建的路徑下，完成。

3.設定請求合法域名

登入微信公眾平臺－> "設定" －> "開發設定" －> "request 合法域名" －>新增 api.map.baidu.com －> 點選"儲存並提交"，如圖所示：

開啟開發者工具 －> "專案" －> 點選"重新整理"，合法域名設定同步完成。

4. 使用：

var app = getApp()
// 引用百度地圖微信小程式JSAPI模組 換成你的檔案路徑 
var bmap = require('../../utils/bmap-wx.min.js'); 
var wxMarkerData = [];  //定位成功回撥物件  
Page({
  /**
   * 頁面的初始資料
   */
  data: {
    ak: "。。。", //填寫申請到的ak  
    markers: [],     //地圖示記 這裡暫沒用到
    longitude: '',   //經度  
    latitude: '',    //緯度  
    address: '',     //地址  
    business: {},    //商圈 
    desc:'' ,        //描述
  },
 onLoad: function (options) {
    console.log("定位");
    var that = this;
    //新建百度地圖物件
    var BMap = new bmap.BMapWX({
      ak: that.data.ak
    });
    var success = function(data){
      console.log(data);
      wxMarkerData = data.wxMarkerData;
      that.setData({
        markers:wxMarkerData,
        latitude: wxMarkerData[0].latitude,
        longitude:wxMarkerData[0].longitude,
        address:wxMarkerData[0].address,
        business: wxMarkerData[0].business,
        desc: wxMarkerData[0].desc,
        city: wxMarkerData[0].title,
      });
    }
    var fail = function(data){
      console.log(data);
    }
    BMap.regeocoding({
      fail:fail,
      success:success
    });
  },
})

 

       <view class="jing">經度：{{latitude}}</view>
       <view class="wei">緯度：{{longitude}}</view>
       <view class="add">地址：{{address}}</view>
       <view class="add">商圈：{{business}}</view>
       <view class="add">描述：{{desc}}</view>

實現方法二：騰訊地圖API

1. 申請開發者金鑰（key）：申請密匙
2. 安全域名設定，需要在微信公眾平臺新增域名地址https://apis.map.qq.com
3. 示例 

   // 引入騰訊地圖SDK核心類
   var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
   var util = require("../../utils/util.js");
   var qqmapsdk;
   Page({
   　data: {
   　　resData: []
   　},
   　onLoad: function (options) {
   　　// 例項化騰訊地圖API核心類
   　　qqmapsdk = new QQMapWX({
   　　　key: 'HHHHH-BHJDJ-CZQPP-UN4IHS-QYOF2-MYFU3'//此處使用你自己申請的key
   　　});
   　},
   　onShow: function () {
   　　var that = this;
   　　// 騰訊地圖呼叫介面
   　　qqmapsdk…({
   　　　　　
   　　})
   　}
   })