推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 837|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(15) : 微信小程序的百度地圖獲取地理位置

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:29:43 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

由于小程序只提供了我們一個獲取地理位置、速度的api,并沒有獲取的相關地位位置的信息等等,因此我們還需要借助一些第三方的api來實現



下面,介紹使用百度地圖的api來獲取地位位置的信息。


1> 第一步:先到百度開放平臺http://lbsyun.baidu.com申請ak
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key


申請到ak后,在我的應用里就能查看到



2> 第二步:配置你的request合法域名

配置域名請到微信公眾平臺的后臺里設置



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



4> 第四步:引入JS模塊
在項目根目錄下新建一個路徑,將百度的js文件拷貝到新建的路徑下,完成。
如下圖所示,新建路徑 "libs/bmap-wx" ,將 bmap-xw.min.js 文件拷貝至 "libs/bmap-wx" 路徑下。



5> 第五步:在所需的js文件內導入js
// 引用百度地圖,注意:require傳入一個相對路徑
var bmap = require('../../libs/bmap-wx/bmap-wx.js');


6> 第六步:編輯代碼
注意:此處樓主使用的ak是隨便寫的,同學們需要自行申請!!!
xxx.wxml:


[html] view plain copy


  • <view>  
  •     <viwe>經度:{{longitude}}</viwe>  
  •     <view>緯度:{{latitude}}</view>  
  •     <view>地址:{{address}}</view>  
  •     <view>城市:{{cityInfo.city}}</view>  
  • </view>  



xxx.js:


[javascript] view plain copy


  • // 引用百度地圖微信小程序JSAPI模塊   
  • var bmap = require('../../libs/bmap-wx/bmap-wx.min.js');  
  • var wxMarkerData = [];  //定位成功回調對象  
  • Page({  
  •   data:{  
  •     ak:"FHG7utZtdyXN2", //填寫申請到的ak  
  •     markers: [],  
  •     longitude:'',   //經度  
  •     latitude:'',    //緯度  
  •     address:'',     //地址  
  •     cityInfo:{}     //城市信息  
  •   },  
  •   onLoad:function(options){  
  •     var that = this;  
  •     /* 獲取定位地理位置 */  
  •     // 新建bmap對象   
  •     var BMap = new bmap.BMapWX({   
  •         ak: that.data.ak   
  •     });   
  •     var fail = function(data) {   
  •         console.log(data);  
  •     };   
  •     var success = function(data) {   
  •         //返回數據內,已經包含經緯度  
  •         console.log(data);  
  •         //使用wxMarkerData獲取數據  
  •         wxMarkerData = data.wxMarkerData;   
  •         //把所有數據放在初始化data內  
  •         that.setData({   
  •             markers: wxMarkerData,  
  •             latitude: wxMarkerData[0].latitude,  
  •             longitude: wxMarkerData[0].longitude,  
  •             address: wxMarkerData[0].address,  
  •             cityInfo: data.originalData.result.addressComponent  
  •         });   
  •     }   
  •     // 發起regeocoding檢索請求   
  •     BMap.regeocoding({   
  •         fail: fail,   
  •         success: success  
  •     });      
  •   }  
  •    
  • })  





7> 第七步:運行
注意:樓主的運行環境在模擬器上,在模擬器所獲取到的定位是有一些誤差的,如需測試真正的地理位置信息,還需要使用真機測試!!!


更多的百度地圖api,可到github查看:https://github.com/baidumapapi/wxapp-jsapi


本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 能赚钱的网上兼职 秒速飞艇开奖是统一 股票融资平台·杨方配资平台 快乐8玩法中奖规则 网络游戏赚钱排行榜 大地棋牌 排列3开奖历史开奖 世界杯彩票比分倍率 福建省22选5行列走势图 cpa广告联盟是什么 经典大众麻将 安徽十一选五基本走势