html5 利用谷歌地图显示当前位置

目前,google在国内需要FQ才能上,翻不了墙的话,只能获取到经纬度信息。

*调用navigator.geolocation对象时,首先要获取用户同意。

navigator.geolocation.getCurrentPosition(callback());                   获取用户的当前位置

navigator.geolocation.watchPosition(callback());                获取当前位置,并不断监视当前位置,一旦位置改变,则调用回调函数。

navigator.geolocation.clearWatch()                停止见识用户位置,参数为watchPosition()的返回值

*获取经纬度

    navigator.geolocation.getCurrentPosition(function(pos,error){
        if(!navigator.geolocation) throw "geolocation not support";
            var latitude=pos.coords.latitude;                             
            var longitude=pos.coords.longitude;
            var accuracy=pos.coords.accuracy;
            console.log("当前位置:经度:"+latitude+" 纬度:"+longitude+" 精度:"+accuracy);
    });

*在google地图上静态显示当前位置(能FQ的才能显示出图片)

    function getMap(){
        if(!navigator.geolocation) throw "geolocation not supported";
        var posImg=document.createElement("img");
        navigator.geolocation.getCurrentPosition(setMap);

        return posImg;
        function setMap(pos){
            var latitude=pos.coords.latitude;
            var longitude=pos.coords.longitude;
            var accuracy=pos.coords.accuracy;
            //请求的url
            var url="http://maps.google.com/maps/api/staticmap"+"?center="+latitude+","+longitude+"&size=640*640&sensor=true";
            var zoomlevel=20;     ///设置初始精度
            ///低精度情况下放大
            if(accuracy>80) zoomlevel-=Math.round(Math.log(accuracy/50)/Math.LN2);
            url+="&zoom="+zoomlevel;
            posImg.src=url;

        }
    }

    var img=getMap();
    document.body.appendChild(img);

 喜欢请点击右下角推荐,如有疑问可以留言。转载请标明出处。

posted @ 2017-03-26 20:01  TateWang  阅读(3797)  评论(0编辑  收藏  举报
Top