一.獲取地理位置
由于小程序只提供了我們一個(gè)獲取地理位置、速度的api,并沒有獲取的相關(guān)地位位置的信息等,我們利用百度地圖的api來獲取地位位置。

文檔
1.申請(qǐng)ak
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key
2.下載百度地圖的api
解壓后,里面有2個(gè)js文件,一個(gè)是常規(guī)沒壓縮的,另一個(gè)是壓縮過的
PS:由于小程序項(xiàng)目文件大小限制為1M,建議使用壓縮版的js文件!

用5kb那個(gè)js
3.引入JS模塊

放在utils下
4.在所需的js文件內(nèi)導(dǎo)入js
// 引用百度地圖,注意:require傳入一個(gè)相對(duì)路徑
var bmap = require('../../utils/bmap-wx/bmap-wx.js');
5.編輯代碼
.wxss代碼為
-
<view>
-
<viwe>經(jīng)度:{{longitude}}</viwe>
-
<view>緯度:{{latitude}}</view>
-
<view>地址:{{address}}</view>
-
<view>城市:{{cityInfo.city}}</view>
-
</view>
.js代碼為:
-
var bmap = requir('../../utils/bmap-wx/bmap-wx.min.js');
-
var wxMarkerData = []; //定位成功回調(diào)對(duì)象
-
Page({
-
data: {
-
ak: "FHG7utZtdyXN2", //填寫申請(qǐng)到的ak
-
markers: [],
-
longitude: '', //經(jīng)度
-
latitude: '', //緯度
-
address: '', //地址
-
cityInfo: {} //城市信息
-
},
-
onLoad: function (options) {
-
var that = this;
-
/* 獲取定位地理位置 */
-
// 新建bmap對(duì)象
-
var BMap = new bmap.BMapWX({
-
ak: that.data.ak
-
});
-
var fail = function (data) {
-
console.log(data);
-
};
-
var success = function (data) {
-
//返回?cái)?shù)據(jù)內(nèi),已經(jīng)包含經(jīng)緯度
-
console.log(data);
-
//使用wxMarkerData獲取數(shù)據(jù)
-
wxMarkerData = data.wxMarkerData;
-
//把所有數(shù)據(jù)放在初始化data內(nèi)
-
that.setData({
-
markers: wxMarkerData,
-
latitude: wxMarkerData[0].latitude,
-
longitude: wxMarkerData[0].longitude,
-
address: wxMarkerData[0].address,
-
cityInfo: data.originalData.result.addressComponent
-
});
-
}
-
// 發(fā)起regeocoding檢索請(qǐng)求
-
BMap.regeocoding({
-
fail: fail,
-
success: success
-
});
-
}
-
-
})
6.運(yùn)行 注意:樓主的運(yùn)行環(huán)境在模擬器上,在模擬器所獲取到的定位是有一些誤差的,如需測(cè)試真正的地理位置信息,還需要使用真機(jī)測(cè)試?。?!

結(jié)果
二.進(jìn)行地圖導(dǎo)航
微信小程序里面是不能導(dǎo)航的,原因是小程序的代碼最多只能有1M,他的運(yùn)行內(nèi)存只能有10M,一個(gè)區(qū)域地圖下載下來就不止1M了所以在應(yīng)用內(nèi)我們無法做到導(dǎo)航的,但是應(yīng)用外呢!
關(guān)于APP開發(fā),一般如果導(dǎo)航這個(gè)功能不是很重要的話就會(huì)放到應(yīng)用外來做這個(gè)功能,但是高德地圖和騰訊地圖都會(huì)有響應(yīng)的SDK,可是小程序不同,我們?cè)撊绾卧谛〕绦蛲庹{(diào)用導(dǎo)航功能呢?
打開小程序中關(guān)于位置的API, 1.wx.getLocation(OBJECT) 獲取當(dāng)前的地理位置、速度。 2.wx.chooseLocation(OBJECT) 打開地圖選擇位置。 3.wx.openLocation(OBJECT) ?使用微信內(nèi)置地圖查看位置。

查看長沙理工大學(xué) 具體實(shí)現(xiàn)代碼為:
-
wx.getLocation({
-
type: 'gcj02', //返回可以用于wx.openLocation的經(jīng)緯度
-
success: function(res) {
-
var latitude = res.latitude
-
var longitude = res.longitude
-
wx.openLocation({
-
latitude: latitude,
-
longitude: longitude,
-
name:"長沙理工大學(xué)",
-
scale: 28
-
})
-
}
-
})
點(diǎn)擊綠點(diǎn)出現(xiàn)如圖:

選擇地圖
選擇手機(jī)上的地圖,然后就跳到了對(duì)應(yīng)的地圖APP上,實(shí)現(xiàn)了應(yīng)用外調(diào)用導(dǎo)航功能。
|