商城系統(tǒng) 注冊

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

2018-07-06|HiShop
導(dǎo)讀:由于小程序只提供了我們一個獲取地理位置、速度的api,并沒有獲取的相關(guān)地位位置的信息等,我們利用百度地圖的api來獲取地位位置。...

一.獲取地理位置

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

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

 

文檔 


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步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店

 

電話咨詢 預(yù)約演示 0元開店