微信小程序如何獲取地理位置和進行地圖導航

一.獲取地理位置

由于小程序只提供了我們一個獲取地理位置、速度的api，并沒有獲取的相關地位位置的信息等，我們利用百度地圖的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文件內導入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 = []; //定位成功回調對象
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ù)內，已經(jīng)包含經(jīng)緯度
24. console.log(data);
25. //使用wxMarkerData獲取數(shù)據(jù)
26. wxMarkerData = data.wxMarkerData;
27. //把所有數(shù)據(jù)放在初始化data內
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.運行  注意：樓主的運行環(huán)境在模擬器上，在模擬器所獲取到的定位是有一些誤差的，如需測試真正的地理位置信息，還需要使用真機測試?。。?/p>

結果

二.進行地圖導航

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

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

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

 具體實現(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:"長沙理工大學",
10. scale: 28
11. })
12. }
13. })

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

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