zoukankan      html  css  js  c++  java
  • 百度地图API的IP定位城市和浏览器定位(转)

    百度地图API提供了Geolocation 和 LocalCity两个服务类。

    这俩API可以分别供用户在JavaScript中进行定位和城市确认。

    1 本质上,Geolocation这个类是使用了支持HTML5浏览器提供的Geolocation API 来进行定位的。目前Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位(因为他们支持HTML5)。

    2 本质上,LocalCity这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市。

    关于第一点的原理,在此解释下:在支持HTML5的浏览器下,navigator对象下有一个属性----geolocation,而 geolocation属性又有个方法getCurrentPosition(回调函数1,回调函数2)可以通过浏览器向设备发起定位请求,浏览器就会让 设备发送相关指令到附近上网设备,上网设备返回定位信息给用户设备,浏览器就获得了用户位置。

    当浏览器获得定位信息成功,则navigator.geolocation.getCurrentPosition(回调函数1,回调函数2); 中的回调函数1执行,如果定位失败,则回调函数2执行。  

    若定位成功,则自动把定位结果对象作为参数传递给回调函数1,。 若定位失败,则自动把错误对象传递给回调函数2.  所以在回调函数2中可通过error.code 获取到错误码。(假设形参名为error)。

    如下代码就是用HTML5获取定位信息,并把成功定位交给showPosition处理,把错误定位交给showError处理。

    function getLocation()
    
      {
    
      if (navigator.geolocation)
    
        {
    
        navigator.geolocation.getCurrentPosition(showPosition,showError);
    
        }
    
      else{x.innerHTML="Geolocation is not supported by this browser.";} //浏览器不支持HTML5.
    
      }

    注意:百度地图提供的API使用起来与HTML5原生的定位代码是不同的。

    下面是百度定位代码:

    <script type="text/javascript">
    
    var map = new BMap.Map("allmap");
    
    var point = new BMap.Point(116.331398,39.897445);
    
    map.centerAndZoom(point,12);
    
     
    
    var geolocation = new BMap.Geolocation();  //实例化浏览器定位对象。
    
     //下面是getCurrentPosition方法。调用该对象的 getCurrentPosition(),与HTML5不同的是,这个方法原型是 getCurrentPosition(callback:function[, options: PositionOptions]),也就是说无论成功与否都执行回调函数1,第二个参数是关于位置的选项。 因此能否定位成功需要在回调函数1中自己判断。
    
    geolocation.getCurrentPosition(function(r){   //定位结果对象会传递给r变量
    
        if(this.getStatus() == BMAP_STATUS_SUCCESS){  //通过Geolocation类的getStatus()可以判断是否成功定位。
    
            var mk = new BMap.Marker(r.point);    //基于定位的这个点的点位创建marker
    
            map.addOverlay(mk);    //将marker作为覆盖物添加到map地图上
    
            map.panTo(r.point);   //将地图中心点移动到定位的这个点位置。注意是r.point而不是r对象。
    
            alert('您的位置:'+r.point.lng+','+r.point.lat);  //r对象的point属性也是一个对象,这个对象的lng属性表示经度,lat属性表示纬度。
    
        }
    
        else {
    
            alert('failed'+this.getStatus());
    
        }        
    
    },{enableHighAccuracy: true})
    
    //关于状态码
    
    //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 新增)
    
    </script>

    IP获取城市就简单了,如下:

    <script type="text/javascript">
    
    var map = new BMap.Map("allmap");
    
    var point = new BMap.Point(116.331398,39.897445);
    
    map.centerAndZoom(point,12);
    
    function myFun(result){
    
        var cityName = result.name;
    
        map.setCenter(cityName);   //关于setCenter()可参考API文档---”传送门“
    
        alert(cityName);
    
    }
    
    var myCity = new BMap.LocalCity();
    
    myCity.get(myFun);   //创建一个LocalCity对象myCity,然后调用其get()方法,就得到了用户IP对应的城市。该城市结果会以参数形式传递给回调函数myFun。接下来就是myFun(结果城市result)来执行了----即上文红色代码。
    
    </script>
  • 相关阅读:
    整数数组中最大子数组的和的问题(续)
    整数数组中最大子数组的和的问题
    PHP开发环境(Apache+mysql+PHPstorm+php)的搭建
    echart 库 初始
    2.15 学习总结 之 天气预报APP volley(HTTP库)之StringRequest
    2.14 学习总结 之 序列化
    2.13 阶段实战 使用layui重构选课系统
    2.12 学习总结 之 表单校验插件validate
    jsp连接数据库的乱码问题 servlet请求参数编码处理get post
    Rocket
  • 原文地址:https://www.cnblogs.com/hnsongbiao/p/5046099.html
Copyright © 2011-2022 走看看