這篇文章將為大家詳細(xì)講解有關(guān)利用JSSDK在網(wǎng)頁中獲取地理位置的方法,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)沙縣免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
復(fù)制一份JSSDK環(huán)境,創(chuàng)建一份index.html文件,結(jié)構(gòu)如圖7.1所示。
圖7.1 7.1節(jié)文件結(jié)構(gòu)
在location.js中,封裝“getLocation”接口,如下:
01 wxJSSDK.location = function(locationApi){ 02 if(wxJSSDK.isReady){ //wxJSSDK.isReady 查看微信JSSDK是否初始化完畢 03 if(locationApi){ 04 locationApi.getLocation && wx.getLocation({ //獲取地理位置接口 05 success: function (res) { 06 locationApi.getLocation.success && 07 locationApi.getLocation.success(res); 08 } 09 }); 10 }else{ 11 console.log("缺少配置參數(shù)"); 12 } 13 }else{ 14 console.log("抱歉,wx沒有初始化完畢,請(qǐng)等待wx初始化完畢,再調(diào)用位置接口服 15 務(wù)。"); 16 } 17 }
在index.html文件中,增加“獲取地理位置”按鈕,以及顯示獲取之后的位置信息,代碼結(jié)構(gòu),如下:
01 <!DOCTYPE html> 02 <html lang="en"> 03 <head> 04 <metacharset="UTF-8"> 05 <meta name="viewport" content="width=device-width,initial-scale=1.0, 06 minimum-scale=1, maximum-scale=1.0,user-scalable=no"> 07 <title>第7章 7.1節(jié) 位置操作接口</title> 08 <!--依賴文件:jQuery--> 09 <script src="./js/jquery-1.11.2.min.js?1.1.10"></script> 10 <!--依賴文件:微信的JSSDK源文件--> 11 <scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?1.1.10"></script> 12 <!--依賴文件:coolie--> 13 <script src="./js/cookie.js?1.1.10"></script> 14 <!--JSSDK的環(huán)境--> 15 <script src="./js/wxJSSDK.js?1.1.10"></script> 16 <!--引入檢測(cè)API的位置服務(wù)--> 17 <script src="location.js?1.1.10"></script> 18 <style> 19 input{ 20 width: 100%; 21 padding: 0.2em; 22 background-color: #5eb95e; 23 font-size: 1.4em; 24 background-image: linear-gradient(to bottom, #62c462, #57a957); 25 background-repeat: repeat-x; 26 color: #ffffff; 27 text-align: center; 28 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 29 border-radius: 0.3em; 30 } 31 #info{ 32 border-left: 3px solid#03a9f4; 33 background-color: #5eb95e; 34 color: #ffffff; 35 border-radius: 0.3em; 36 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 37 } 38 </style> 39 </head> 40 <body> 41 <h2 style="font-size: 8em">:)</h2> 42 <b style="font-size: 3em">位置操作接口!</b><br/><br /> 43 <div id="info"> 44 <p>緯度:<em id="latitude">無</em></p> 45 <p>經(jīng)度:<em id="longitude">無</em></p> 46 <p>速度:<em id="speed">無</em></p> 47 <p>位置精度:<em id="accuracy">無</em></p> 48 </div> 49 <input type="button" value="獲取當(dāng)前地理位置信息" id="getLocation" /> 50 </body> 51 </html>
然后在location.js中增加響應(yīng)事件,代碼如下:
01 window.onload = function(){ 02 var latitude,longitude, speed ,accuracy; // 位置信息初始變量 03 $("#getLocation").click(function(){ // 獲取地理位置接口 04 wxJSSDK.location({ 05 getLocation:{ 06 success:function (res) { 07 latitude = res.latitude; // 緯度,浮點(diǎn)數(shù),范圍為90 ~ -90 08 $("#latitude").html(latitude); 09 longitude = res.longitude; // 經(jīng)度,浮點(diǎn)數(shù),范圍為180 ~ -180。 10 $("#longitude").html(longitude); 11 speed = res.speed; // 速度,以米/每秒計(jì) 12 $("#speed").html(speed); 13 accuracy = res.accuracy; // 位置精度 14 $("#accuracy").html(accuracy); 15 } 16 } 17 }); 18 }); 19 }
最后記得在JSSDK的配置環(huán)境中加入“getLocation”API的權(quán)限。
“getLocation”的位置成功后,會(huì)返回“緯度”、“經(jīng)度”、“速度”、“位置精度”的相關(guān)信息。當(dāng)點(diǎn)擊“獲取位置”的按鈕之后,微信會(huì)彈出提示信息,如圖7.2所示。獲取位置服務(wù)成功之后的結(jié)果如圖7.3所示。
圖7.2 微信JSSDK獲取位置信息提示
圖7.3 獲取位置服務(wù)成功的信息
《微信公眾平臺(tái)網(wǎng)頁開發(fā)實(shí)戰(zhàn)——HTML5+JSSDK混合開發(fā)解密》
歡迎一起交流本書
關(guān)于利用JSSDK在網(wǎng)頁中獲取地理位置的方法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
網(wǎng)頁名稱:利用JSSDK在網(wǎng)頁中獲取地理位置的方法
文章來源:http://muchs.cn/article4/ihdjie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、App開發(fā)、微信公眾號(hào)、做網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)