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

目前，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);

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