微信小程序 location API接口詳解及實(shí)例代碼
微信小程序 location API 接口:
現(xiàn)在微信小程序火了 ,利用假期時(shí)間學(xué)習(xí)了下,微信小程序的基礎(chǔ)知識(shí),嘿嘿!
以下是記錄學(xué)習(xí)微信小程序 location API接口,并且寫(xiě)了一個(gè)小實(shí)例來(lái)記錄,如有錯(cuò)誤之處還請(qǐng)指正。
微信小程序的位置接口共有兩個(gè):
1、wx.getLocation(OBJECT)獲取當(dāng)前的地理位置、速度。
2、wx.openLocation(OBJECT) 使用微信內(nèi)置地圖查看位置
然后,根據(jù)object參數(shù)說(shuō)明,結(jié)合module模塊化重寫(xiě)了下兩個(gè)接口在暴露出來(lái)引用,讓項(xiàng)目更加靈活管理。具體代碼如下:
location.js::
/**
* 獲取當(dāng)前的地理位置、速度。
* 1、fType: 默認(rèn)為 wgs84 返回 gps 坐標(biāo),gcj02 返回可用于wx.openLocation的坐標(biāo) 選填
* 2、cbSuccessFun: 接口調(diào)用成功的回調(diào)函數(shù),返回內(nèi)容詳見(jiàn)返回參數(shù)說(shuō)明。 必填
* 3、cbFailFun: 接口調(diào)用失敗的回調(diào)函數(shù) 選填
* 4、cbCompleteFun:接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行) 選填
*/
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);
}
/**
* 使用微信內(nèi)置地圖查看位置
* 1、latitude: 緯度,范圍為-90~90,負(fù)數(shù)表示南緯 必填
* 2、longitude: 經(jīng)度,范圍為-180~180,負(fù)數(shù)表示西經(jīng) 必填
* 3、scale: 縮放比例,范圍1~28,默認(rèn)為28 選填
* 4、name: 位置名 選填
* 5、address: 地址的詳細(xì)說(shuō)明 選填
* 6、cbSuccessFun: 接口調(diào)用成功的回調(diào)函數(shù) 選填
* 7、cbFailFun: 接口調(diào)用失敗的回調(diào)函數(shù) 選填
* 8、cbCompleteFun:接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行) 選填
*/
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
// });
// }
})
經(jīng)調(diào)試發(fā)現(xiàn)getLocation接口的type不管是傳遞wgs84還是gcj02返回的參數(shù)都是只有經(jīng)緯度,并沒(méi)有文檔上提到的速度和位置的精確度兩個(gè)參數(shù)

然后我在點(diǎn)擊“去這里”頁(yè)面跳轉(zhuǎn)后,發(fā)現(xiàn)每次都是提示定位失敗,不曉得是不是因?yàn)閣eb開(kāi)發(fā)工具的原因。而且好像經(jīng)緯度有差距,和本人實(shí)際距離不一致。還有定義了name和address兩個(gè)參數(shù)并沒(méi)有發(fā)現(xiàn)有啥變化,最后比較嚴(yán)重的問(wèn)題是我點(diǎn)擊返回后提示page route錯(cuò)誤,再次點(diǎn)擊按鈕,提示錯(cuò)誤了,不能點(diǎn)擊。不知道什么原因?要怎么解決!

目前針對(duì)這個(gè)接口學(xué)習(xí)到這里,后續(xù)有其他發(fā)現(xiàn)或者解決辦法在來(lái)更新。
==============================================================================================
今天,微信發(fā)布新版本了【最新版本 0.10.101100】,對(duì)于位置接口也有進(jìn)一步的更新,
1、打開(kāi)地圖接口在返回不會(huì)提示page route錯(cuò)誤了
2、wx.openLocation接口傳遞自定義的name和address參數(shù)后,可以在地圖描述框,顯示出來(lái)了,不過(guò)經(jīng)緯度依然不夠準(zhǔn)確。點(diǎn)擊“去這里”依然是定位失敗。

感謝閱讀,希望能幫助到大家,謝謝對(duì)本站的支持!
相關(guān)文章
threeJs實(shí)現(xiàn)波紋擴(kuò)散及光標(biāo)浮動(dòng)效果詳解
這篇文章主要為大家介紹了threeJs實(shí)現(xiàn)波紋擴(kuò)散及光標(biāo)浮動(dòng)效果詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
前端通過(guò)JavaScript創(chuàng)建修改CAD圖形詳情
這篇文章介紹JavaScript創(chuàng)建修改CAD圖形,創(chuàng)建修改CAD圖形,一般是基于AutoCAD進(jìn)行二次開(kāi)發(fā),ObjectARX是AutoDesk公司針對(duì)AutoCAD平臺(tái)上的二次開(kāi)發(fā)而推出的一個(gè)開(kāi)發(fā)軟件包,它提供了以C++為基礎(chǔ)的面向?qū)ο蟮拈_(kāi)發(fā)環(huán)境及應(yīng)用程序接口,能真正快速的訪問(wèn)AutoCAD圖形數(shù)據(jù)庫(kù)2021-10-10
微信小程序 Button 組件詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 Button 組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
微信公眾號(hào) 提示:Unauthorized API function 問(wèn)題解決方法
這篇文章主要介紹了微信公眾號(hào) 提示:Unauthorized API function 問(wèn)題解決方法的相關(guān)資料,這里提供了出現(xiàn)提示的解決方法,需要的朋友可以參考下2016-12-12
umi插件開(kāi)發(fā)仿dumi項(xiàng)目加載markdown文件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了umi插件開(kāi)發(fā)仿dumi項(xiàng)目加載markdown文件實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
微信小程序中使元素占滿整個(gè)屏幕高度實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序中使元素占滿整個(gè)屏幕高度實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-12-12

