1. 程式人生 > >微信小程式學習:location API介面

微信小程式學習:location API介面

微信小程式的位置介面共有兩個:

1、wx.getLocation(OBJECT)獲取當前的地理位置、速度。

2、wx.openLocation(OBJECT) 使用微信內建地圖檢視位置

然後,根據object引數說明,結合module模組化重寫了下兩個介面在暴露出來引用,讓專案更加靈活管理。具體程式碼如下:

location.js::

/**
 * 獲取當前的地理位置、速度。
 * 1、fType:         預設為 wgs84 返回 gps 座標,gcj02 返回可用於wx.openLocation的座標     選填
 * 2、cbSuccessFun: 介面呼叫成功的回撥函式,返回內容詳見返回引數說明。 必填
 * 3、cbFailFun:    介面呼叫失敗的回撥函式 選填
 * 4、cbCompleteFun:介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) 選填
 */
function getLocationFun(fType, cbSuccessFun, cbFailFun, cbCompleteFun){
    var getObj={};
    getObj.type="wgs84";
    if(fType){
        getObj.type=fType;
    }
    getObj.success=function(res){
        var _res=res;
        if(cbSuccessFun){
            cbSuccessFun(_res);
        }
    }
    getObj.fail=function(res){
        if(cbFailFun){
            cbFailFun();
        }else{
            console.log("getLocation fail:"+res.errMsg);
        }
    }
    getObj.complete=function(res){
        if(cbCompleteFun){
            cbCompleteFun();
        }
    }
    wx.getLocation(getObj);
}

/**
 * 使用微信內建地圖檢視位置
 * 1、latitude:     緯度,範圍為-90~90,負數表示南緯 必填
 * 2、longitude:    經度,範圍為-180~180,負數表示西經 必填
 * 3、scale:        縮放比例,範圍1~28,預設為28 選填
 * 4、name:         位置名 選填
 * 5、address:      地址的詳細說明 選填
 * 6、cbSuccessFun: 介面呼叫成功的回撥函式 選填
 * 7、cbFailFun:    介面呼叫失敗的回撥函式 選填
 * 8、cbCompleteFun:介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) 選填
 */
function openLocationFun(latitude, longitude, scale, name, address, cbSuccessFun, cbFailFun, cbCompleteFun){
    var openObj={};
    openObj.latitude=latitude;
    openObj.longitude=longitude;
    openObj.scale=15;
    if(scale>0 && scale<29){
        openObj.scale=scale;
    }
    if(name){
        openObj.name=name;
    }
    if(address){
        openObj.address=address;
    }
    openObj.success=function(res){
        if(cbSuccessFun){
            cbSuccessFun();
        }
    }
    openObj.fail=function(res){
        if(cbFailFun){
            cbFailFun();
        }else{
            console.log("openLocation fail:"+res.errMsg);
        }
    }
    openObj.complete=function(res){
        if(cbCompleteFun){
            cbCompleteFun();
        }
    }
    wx.openLocation(openObj);
}

module.exports={
    getLocationFun: getLocationFun,
    openLocationFun: openLocationFun
}

demo.js::
var comm = require( "../../common/common.js" );
var location=require('../../common/location.js');
Page( {
  data: {
    uploadImgUrls: [],
    title: ""
  },
  getlocation: function( e ) {
    location.getLocationFun(
      'gcj02', 
      function(cb){
        console.log(cb);
        var _latitude=cb.latitude;
        var _longitude=cb.longitude;
        location.openLocationFun(
          _latitude,
          _longitude,
          null,
          "廈門觀音山",
          "廈門觀音山匹克大廈",
          null,
          null,
          null
        )
      }
    )
  },
  onLoad: function( options ) {
    var _title = "ddd";
    if( options.title ) {
      _title = options.title;
    }
    this.setData( {
      title: _title
    })
    console.log("load")
    console.log( comm.formatDateFun( new Date(), 1 ) );
  },
  onShow:function(e){
    console.log("show");
  },
  onHide: function(e){
    console.log("hide");
  },
  onUnload:function(e){
    console.log("unload");
  }
  // onReady: function(){
  //   wx.setNavigationBarTitle({
  //     title: this.data.title
  //   });
  // }
})

經除錯發現getLocation介面的type不管是傳遞wgs84還是gcj02返回的引數都是隻有經緯度,並沒有文件上提到的速度和位置的精確度兩個引數

然後我在點選“去這裡”頁面跳轉後,發現每次都是提示定位失敗,不曉得是不是因為web開發工具的原因。而且好像經緯度有差距,和本人實際距離不一致。還有定義了name和address兩個引數並沒有發現有啥變化,最後比較嚴重的問題是我點選返回後提示page route錯誤,再次點選按鈕,提示錯誤了,不能點選。不知道什麼原因?要怎麼解決!


目前針對這個介面學習到這裡,後續有其他發現或者解決辦法在來更新。

=====================================================================================

今天,微信釋出新版本了【最新版本 0.10.101100】,對於位置介面也有進一步的更新,

1、開啟地圖介面在返回不會提示page route錯誤了

2、wx.openLocation介面傳遞自定義的name和address引數後,可以在地圖描述框,顯示出來了,不過經緯度依然不夠準確。點選“去這裡”依然是定位失敗。