js 如何在浏览器中获取当前位置的经纬度

这个有一定的误差哈，具体的误差是多少，有兴趣的朋友可以去测试下

直接上代码

index.html页面代码：

<html>
<head lang="en">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"
        name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>浏览器中获取当前经纬度</title>
    <link href="../addons/weilive/style/css/user.css" rel="stylesheet">
    <script src="baiduposition.js" type="text/javascript"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&amp;ak=s6vFvPKgaEnI2ImqBpKGDj0m"></script>
    <script src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=s6vFvPKgaEnI2ImqBpKGDj0m&amp;services=&amp;t=20160401164342"
        type="text/javascript"></script>
</head>
<body>
    <div class="app-view">
        <a style="cursor: pointer;" onclick="baiduPosition(35);" class="z-sel"><span>获取经纬度</span></a>
    </div>
    <script type="text/javascript">
        //该js函数是必须要的不然要报错
        function positions(json, cid) {
            //可以获取到了地理位置，跳转页面，然后在跳转的页面在获取经纬度的值
            //window.location.href = "./index.php?i=5&amp;c=entry&amp;do=list&amp;m=weilive&amp;cid=" + cid + "&amp;lng=" + json['lng'] + "&amp;lat=" + json['lat'];
            //alert(json['lng']);
        }
    </script>
</body>
</html>

baiduposition.js代码

document.write("<script src='http://api.map.baidu.com/api?v=2.0&ak=s6vFvPKgaEnI2ImqBpKGDj0m'></script>");
function baiduPosition(cid){
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var position = {
                lng: r.point.lng,
                lat: r.point.lat
            }
            if(cid == 'sort'){
                sort(position);
            } else {
                positions(position, cid);
            }
            alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            //alert('获取当前位置失败,请确定您开启了定位服务');
        }        
    },{enableHighAccuracy: true});
}

具体的效果图如下：

点击【位置共享信息】后，等几秒中就会弹出提示信息，我上面的js代码把alert注释了咯，需要的把注释取消就能看见效果了哈

 

posted @ 2016-04-01 17:54  风琴~云淡  阅读(14319)  评论(0)  编辑  收藏  举报