<dl id="opymh"></dl>

<div id="opymh"></div>
      <div id="opymh"><tr id="opymh"></tr></div>

        <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

        <em id="opymh"></em>

        <em id="opymh"><ol id="opymh"></ol></em>

              頻道欄目
              首頁 > 微信學院 > 微信公眾平臺開發 > 正文
              微信公眾號開發之地圖定位實現
              2018-07-30 16:28:34         來源:c1149418436的博客  
              收藏   我要投稿

              相關環境:微信公眾號+百度地圖

              需求:需要在頁面上實現,點擊落圖按鈕——》定位當前位置(獲取經緯度)——》通過百度地圖顯示

              內容:

              做這個功能之前,并未接觸過百度地圖還有微信公眾號開發之類的,所以即便突擊學習了一下,也不太了解。

              1.微信接口定位+百度地圖顯示位置(成功)

              開始做的時候,由于微信只是剛接觸,雖然知道微信有定位的接口,但是還是先去嘗試了百度地圖的定位和h5的定位,結果當然是失敗(后面會總結一下失敗的經驗),最后嘗試的使用微信公眾號定位接口獲取當前坐標+百度地圖顯示位置的方式才成功搞定,

               //這就是微信獲取地理位置的接口,官方文檔,百度資料一大堆

                  function getwxlocal(){

                      wx.getLocation({

                          success: function (res) {

                              var point=new BMap.Point(res.longitude , res.latitude);

                              //使用百度接口對h5定位坐標進行坐標轉換0-》4

                              BMap.Convertor.translate(point,0,translateCallback);

                              //alert("獲取地理位置成功,經緯度為:(" + res.latitude + "," + res.longitude + ")" );

                              //alert(JSON.stringify(res));

                          },

                          cancel: function (res) {

                            $.alert('用戶拒絕授權獲取地理位置',"提示");

                          } 

                       });

                  }

              //坐標轉換完之后的回調函數方法

                  function translateCallback(point) {

                      initMap(point.lng,point.lat);//用得到的經緯度初始化地圖

                }

              2.百度地圖的api進行實時定位(失敗)

                  測試遇到了一些問題:

                (1)定位位置偏移嚴重(室內偏移-正常)

                 雖然不太了解地圖,但是一看到功能需求的時候,就想到了使用百度地圖的api進行定位,第一次點擊按鈕,垮。。。成功了,可以定位,但是偏的幾百米,偏了幾百米,感覺挺嚴重的,拼命研究各種方法,什么百度的糾偏接口,糾偏算法,一點用也沒有。

                   咋辦啊,愁死了,跟一個同事說起的時候,答案居然是正常的,手機的定位的基于衛星還有基站的什么的(了解不多),所以在室內進行測試的時候,偏移是很正常的,好吧,雖然很郁悶,但是知道原因了。后來在室外測試確實沒問題,這個問題算是解決了。

              (2)無法進行第二次定位(app才有實時定位),(但是如果打開手機上的地圖app,后臺運行,公眾號內的實時定位就完全沒問題了)

                一開始定位完,沒發現問題,但是在回家的路上,我開著微信,打開網頁,按鈕那么一按,問題出來了,咋還是公司的位置,一直刷一直刷,沒有用還是公司的位置,沒辦法,放棄了,打算回公司再看一下情況,過了幾個小時,心血來潮,定位按鈕一按,成功了。要噴血啊,這是咋回事,開始瘋狂查資料,百度沒找到,谷歌沒找到,每次定位完,都要好久才可以再定位一次,這顯然是不行的。找來找去,在只言片語中發現,一句話,百度地圖只支持在app程序中實現實時定位,在網頁上只能是過好久才能定位一次(當然我現在也不知道真的假的?),反正我是實現不了,姑且當他是真的。那使用百度地圖實現實時定位的方法,就沒有用了。(本方法宣告失敗)

              百度定位代碼 (定位一次后,許久才能定位一次)//百度定位當前位置 --與h5定位類似(根據h5定位做的)

                  var geolocation = new BMap.Geolocation();

                  function getLocal(){

                      geolocation.getCurrentPosition(function(r){

                          if(this.getStatus() == BMAP_STATUS_SUCCESS){

                              initMap(r.point.lng,r.point.lat);//定位完獲取經緯度,初始化地圖

                          } else {

                              alert('failed'+this.getStatus());

                          }        

                      },{enableHighAccuracy: true})

                  } 

              3.h5定位實現實時定位(失敗)

              百度地圖實時定位的方法失敗后,就開始找其他方法了,百度了一下,h5定位的方法例子一大堆,高興了一下,還以為有解決方案了,但是最終還是失望了。

              由于h5的定位和百度定位很相似(網上是說百度定位是根據h5定位做的),反正是失敗了,與百度定位一樣過好久才能實現一次定位,(一樣也是打開手機上的地圖app,實時定位就可以實現)

              //h5定位代碼

              function getLocation() {

              if (navigator.geolocation) {

              navigator.geolocation.getCurrentPosition(showPosition, showError);

              } else {

                     str= "Geolocation is not supported by this browser.";//瀏覽器不支持定位

              }   }

              function showPosition(position) {

                    str = "Latitude: " + position.coords.latitude+ "<br />Longitude: " + position.coords.longitude;//經緯度

              }

              function showError(error) {

              switch (error.code) {

              case error.PERMISSION_DENIED:

                  str= "User denied the request for Geolocation.";//用戶不允許地理定位

                  break;

              case error.POSITION_UNAVAILABLE:

                  str= "Location information is unavailable.";//無法獲取當前位置

                  break;

              case error.TIMEOUT:

                  str= "The request to get user location timed out.";//操作超時

                  break;

              case error.UNKNOWN_ERROR:

                  str= "An unknown error occurred.";//未知錯誤

                  break;

              }   }

              4.h5跟蹤定位實現實時定位(嘗試失敗,勉強可一用)

                百度和h5定位失敗后,突發奇想使用h5的跟蹤定位實現,跟蹤定位大概每過幾十秒自動定位一次,但是我要的功能是點擊按鈕采取定位,所以想通過跟蹤定位看能不能實現,大概想了幾個方案:

              (1)點擊定位按鈕,刪除當前跟蹤定位,重新建一個,然后定位,但是跟普通定位一樣失敗了,還是只能幾十秒定位一次

              (2)跟蹤定位在后臺運行,每定位一次,把坐標存到一個變量里面,點擊定位按鈕的時候,直接去取坐標,然后定位顯示到百度地圖上,當然這種方法雖然還是幾十秒才能定位一次,但是在需要的時候去取坐標,且幾十秒的時間,人大概也移動不了多遠,滿足基本的需求是足夠了,但是想一想還是排除,感覺用在實時定位上還是很不合適。

              //h5跟蹤定位代碼

                  function getLocal(){

                      if(loc!=null){  loc=null;  }

                      loc=window.navigator.geolocation;

                      if (loc) {

                          if(watchID!=null){ watchID=null; }

                          watchID=loc.watchPosition(showPosition,showError);//h5跟蹤定位

                           if(currentID!=null){ currentID==null;   }

                          //h5當前位置定位

                          currentID=loc.getCurrentPosition(showPosition,showError,{provider:'baidu'});  

                      }else {

                          alert("該瀏覽器不支持定位。");

                      } 

                  } 

              點擊復制鏈接 與好友分享!回本站首頁
              上一篇:如何獲取微信公眾號文章封面圖?
              下一篇:最后一頁
              相關文章
              圖文推薦
              點擊排行

              關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

              版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

              极速飞艇好假
              <dl id="opymh"></dl>

              <div id="opymh"></div>
                  <div id="opymh"><tr id="opymh"></tr></div>

                    <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                    <em id="opymh"></em>

                    <em id="opymh"><ol id="opymh"></ol></em>

                          <dl id="opymh"></dl>

                          <div id="opymh"></div>
                              <div id="opymh"><tr id="opymh"></tr></div>

                                <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                                <em id="opymh"></em>

                                <em id="opymh"><ol id="opymh"></ol></em>