html5 geolocation / 百度地图api Geolocation 定位当前城市信息&window.navigator.geolocation.getCurrentPosition，在IO

曾经终败给现在 2021-09-12 07:22 366阅读 0赞

问题：原本使用的H5定位普通写法，今天忽然发现失效了。

找到了这篇文章：

### [完美解决window.navigator.geolocation.getCurrentPosition，在IOS10系统中无法定位问题][window.navigator.geolocation.getCurrentPosition_IOS10] ###

http://blog.csdn.net/for12/article/details/52803787

不过实际解决使用的是方面方法①；

\------------------------------------------------------------------分割线-------------------------------------------------------------------------

今日开端：  根据当前所处位置 定位所在城市信息

刚开始采用html5的 geolocation 来获取当前所在经纬度   折腾一番终不能获取城市信息 只能获取到当前的经纬度

查找一番了解到百度已封装该html5 geolocation 特性 链接地址：[ Class:服务类/Geolocation][Class_Geolocation]

于是 自己就写了一个简单的案例 如下所示：

(ps:注释：这个写法在ios10操作系统，微信，uc，支付宝等里面都能正常获取。api.map.baidu.com 的私钥自己到百度进行申请，提高资源次数。）

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>js 百度 geolocation 定位当前城市</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6yAoynmTPNlTBa8z1X4xxxx"></script>
        <script type="text/javascript">
    
            var geolocation = new BMap.Geolocation();
            var gc = new BMap.Geocoder();
    
            geolocation.getCurrentPosition(function (r) {   //定位结果对象会传递给r变量
                        console.log(r);//这里已经包含经纬度和城市。
                        if (this.getStatus() == BMAP_STATUS_SUCCESS) {  //通过Geolocation类的getStatus()可以判断是否成功定位。
                            var pt = r.point;
                            gc.getLocation(pt, function (rs) {
                                console.log(rs);
                                var addComp = rs.addressComponents;
                                alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
                            });
                        }
                        else {
                            //关于状态码
                            //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。
                            //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
                            //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。
                            //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
                            //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。
                            //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。
                            //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
                            //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)
                            //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)
                            switch (this.getStatus()) {
                                case 2:
                                    alert('位置结果未知 获取位置失败.');
                                    break;
                                case 3:
                                    alert('导航结果未知 获取位置失败..');
                                    break;
                                case 4:
                                    alert('非法密钥 获取位置失败.');
                                    break;
                                case 5:
                                    alert('对不起,非法请求位置  获取位置失败.');
                                    break;
                                case 6:
                                    alert('对不起,当前 没有权限 获取位置失败.');
                                    break;
                                case 7:
                                    alert('对不起,服务不可用 获取位置失败.');
                                    break;
                                case 8:
                                    alert('对不起,请求超时 获取位置失败.');
                                    break;
    
                            }
                        }
    
                    },
                    {enableHighAccuracy: true}
            )
    
        </script>
    
    </head>
    <body>
    
    </body>
    </html>

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  如果你看到这里  那么久一定要注意 jquery 加载一定放在 百度地图api 之前。

另附 html5 geolocation 定位( 获取当前经纬度 ):

<html>  
    <head>  
        <meta charset="UTF-8" />  
        <title>js geolocation 定位当前城市</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <script type="text/javascript">  
    if (navigator.geolocation)   
    {  
        navigator.geolocation.getCurrentPosition(  
              
            function( position ) {    
                show_msg( position );  
             },  
               
            function( err ) {  
                   
                switch(error.code)  
                {  
                case 0:  
                  alert("尝试获取您的位置信息时发生错误：" + error.message);  
                  break;  
                case 1:  
                    alert("用户拒绝了获取位置信息请求。");  
                  break;  
                case 2:  
                    alert("浏览器无法获取您的位置信息：" + error.message);  
                  break;  
                case 3:  
                    alert("获取您位置信息超时。");  
                  break;  
                }  
            }  
        )  
    }  
    else  
          alert( '您当前使用的浏览器不支持Geolocation服务' );  
            
            
    function show_msg( position )  
    {  
        var lat = position.coords.latitude;  
        var lng = position.coords.longitude;  
        alert( "您所在的位置： 经度" + lat + "，纬度" + lng );  
          
        if( typeof position.address != "undefined" )  
        {  
            var country = position.address.country;  
            var province = position.address.region;  
            var city = position.address.city;  
            alert(' 您位于 ' + country + province + '省' + city +'市');  
        }  
    }  
    </script>  
          
    </head>  
    <body>  
        <p id="geo_loc"><p>  
    </body>  
    </html>

[window.navigator.geolocation.getCurrentPosition_IOS10]: http://blog.csdn.net/for12/article/details/52803787
[Class_Geolocation]: http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9C%8D%E5%8A%A1%E7%B1%BB/Geolocation