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

时间：2021-12-18 04:12:08

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

*调用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地图上静态显示当前位置（能*的才能显示出图片）

    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);

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

相关文章