微信公众号开发之地图定位实现

相关环境：微信公众号+百度地图

需求：需要在页面上实现，点击落图按钮——》定位当前位置（获取经纬度）——》通过百度地图显示

内容：

做这个功能之前，并未接触过百度地图还有微信公众号开发之类的，所以即便突击学习了一下，也不太了解。

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

        } 

    }