微信小程序如何獲取地理位置和進(jìn)行地圖導(dǎo)航

一.獲取地理位置

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

文檔 

1.申請ak 
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

2.下載百度地圖的api ，鏈接：http://download.csdn.net/detail/michael_ouyang/9754015 
解壓后，里面有2個js文件，一個是常規(guī)沒壓縮的，另一個是壓縮過的 
PS：由于小程序項目文件大小限制為1M，建議使用壓縮版的js文件！

用5kb那個js 

3.引入JS模塊

放在utils下 

4.在所需的js文件內(nèi)導(dǎo)入js 
// 引用百度地圖，注意：require傳入一個相對路徑 
var bmap = require('../../utils/bmap-wx/bmap-wx.js');

5.編輯代碼 
.wxss代碼為

1. <view>
2. <viwe>經(jīng)度：{{longitude}}</viwe>
3. <view>緯度：{{latitude}}</view>
4. <view>地址：{{address}}</view>
5. <view>城市：{{cityInfo.city}}</view>
6. </view>

.js代碼為：

1. var bmap = requir('../../utils/bmap-wx/bmap-wx.min.js');
2. var wxMarkerData = []; //定位成功回調(diào)對象
3. Page({
4. data: {
5. ak: "FHG7utZtdyXN2", //填寫申請到的ak
6. markers: [],
7. longitude: '', //經(jīng)度
8. latitude: '', //緯度
9. address: '', //地址
10. cityInfo: {} //城市信息
11. },
12. onLoad: function (options) {
13. var that = this;
14. /* 獲取定位地理位置 */
15. // 新建bmap對象
16. var BMap = new bmap.BMapWX({
17. ak: that.data.ak
18. });
19. var fail = function (data) {
20. console.log(data);
21. };
22. var success = function (data) {
23. //返回數(shù)據(jù)內(nèi)，已經(jīng)包含經(jīng)緯度
24. console.log(data);
25. //使用wxMarkerData獲取數(shù)據(jù)
26. wxMarkerData = data.wxMarkerData;
27. //把所有數(shù)據(jù)放在初始化data內(nèi)
28. that.setData({
29. markers: wxMarkerData,
30. latitude: wxMarkerData[0].latitude,
31. longitude: wxMarkerData[0].longitude,
32. address: wxMarkerData[0].address,
33. cityInfo: data.originalData.result.addressComponent
34. });
35. }
36. // 發(fā)起regeocoding檢索請求
37. BMap.regeocoding({
38. fail: fail,
39. success: success
40. });
41. }
42.  
43. })

6.運(yùn)行  注意：樓主的運(yùn)行環(huán)境在模擬器上，在模擬器所獲取到的定位是有一些誤差的，如需測試真正的地理位置信息，還需要使用真機(jī)測試?。?！

結(jié)果

二.進(jìn)行地圖導(dǎo)航

微信小程序里面是不能導(dǎo)航的，原因是小程序的代碼最多只能有1M，他的運(yùn)行內(nèi)存只能有10M，一個區(qū)域地圖下載下來就不止1M了所以在應(yīng)用內(nèi)我們無法做到導(dǎo)航的，但是應(yīng)用外呢！

關(guān)于APP開發(fā)，一般如果導(dǎo)航這個功能不是很重要的話就會放到應(yīng)用外來做這個功能，但是高德地圖和騰訊地圖都會有響應(yīng)的SDK，可是小程序不同，我們該如何在小程序外調(diào)用導(dǎo)航功能呢？

打開小程序中關(guān)于位置的API，  1.wx.getLocation(OBJECT) 獲取當(dāng)前的地理位置、速度。  2.wx.chooseLocation(OBJECT) 打開地圖選擇位置。  3.wx.openLocation(OBJECT) ?使用微信內(nèi)置地圖查看位置。

 具體實現(xiàn)代碼為：

1. wx.getLocation({
2. type: 'gcj02', //返回可以用于wx.openLocation的經(jīng)緯度
3. success: function(res) {
4. var latitude = res.latitude
5. var longitude = res.longitude
6. wx.openLocation({
7. latitude: latitude,
8. longitude: longitude,
9. name:"長沙理工大學(xué)",
10. scale: 28
11. })
12. }
13. })

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

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店