<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定位位置偏移?#29616;أ?#23460;内偏移-正常

                 虽然不太了解地图但是一看到功能需求的时候就想到了使用百度地图的api进行定位第一次点击按钮垮成功了可以定位但是偏的几百米偏了几百米感觉挺?#29616;?#30340;拼命研究各种方法什么百度的纠偏接口纠偏算法一点用也没有

                   咋办啊愁死了跟一个同事说起的时候答案居然是正常的?#21482;?#30340;定位的基于卫星还有基站的什么的了解不多所以在室内进行测试的时候偏移是很正常的好吧虽然很郁闷但是知道原因了后来在室外测试确实没问题这个问题算是解决了

              2无法进行第二次定位(app才有实时定位)但是如果打开?#21482;?#19978;的地图app后台运行公众号内的实时定位就完全没问题了

                一开始定位完没发现问题但是在回家的路上我开着微信打开网页按钮那么一按问题出来了咋还是公司的位置一直刷一直刷没有用还是公司的位置没办法放弃了打算回公司再看一下情况过了几个小时心血来潮定位按钮一按成功了要喷血啊这是咋回事开始疯狂查资料百度没找到谷歌没找到?#30475;?#23450;位完都要好久才可以再定位一次这显然是不行的找来找去在只言片语中发现一句话百度地图只支持在app程序中实现实时定位在网页?#29616;?#33021;是过好久才能定位一次当然我现在也不知道真的假的反正我是实现不了姑且当他是真的那使用百度地图实现实时定位的方法就没有用了本方法宣告失败

              百度定位代码 定位一次后许久才能定位一次//百度定位当前位置 --与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定位实现实时定位失败

              百度地图实时定位的方法失败后就开始?#31227;?#20182;方法了百度了一下h5定位的方法例子一大堆高兴了一下还以为有解决方案了但是最终还是失望了

              由于h5的定位和百度定位很相似网上是说百度定位是根据h5定位做的反正是失败了与百度定位一样过好久才能实现一次定位一样也是打开?#21482;?#19978;的地图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点击定位按钮?#22659;?#24403;前跟踪定位重新建一个然后定位但是跟普通定位一样失败了还是只能几十秒定位一次

              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("该浏览器不支持定位");

                      } 

                  } 

              点击复制链接 与好友分享!回本站首页
              上一篇如?#20301;?#21462;微信公众号文?#36335;?#38754;图
              下一篇最后一页
              相关文章
              图文推荐
              点击排行

              关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报?#34892;?/a>

              版权所有: 红黑联盟--致力于做实用的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>