“jspopularGL

2022年8月22日 (一) 16:32的最后版本

定位

更新时间：2021年03月07日

简介

JavaScript API提供在Web端获取当前位置信息的方法，融合了浏览器定位、IP定位、安卓定位SDK辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息等功能。
浏览器定位精度和性能依赖浏览器自身特性，IP定位的精度值为城市级别。
对于安卓WebView页面的开发者，可以结合定位SDK进行辅助定位，使用方法参见定位SDK相关章节。

注意：

1.由于Chrome、iOS10以上系统等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。

2.iOS15系统浏览器默认关闭位置请求，需要用户设置手机为允许/询问后方可获取精确的定位,定位权限的开启方式请参见iOS15定位问题。

3.由于浏览器原生定位成功率并不高，我们提供ip和安卓sdk定位进行辅助，如果定位精准在城市级别，可提供ak联系我们提高定位精准度。

提供的定位服务

接口	类名	说明
浏览器定位	Geolocation	优先调用浏览器H5定位接口，如果失败会调用IP定位
IP定位	LocalCity	根据用户IP 返回城市级别的定位结果
定位SDK辅助定位	Geolocation	当您的APP中有内置的Web页面，同时在Web页面需要提供您的当前位置信息时，可调用集成在App中的百度地图定位SDK来获取更精准的位置信息

状态码说明

状态码	说明
6	ERR_PERMISSION_DENIED，没有权限，定位被拒绝
2	ERR_POSITION_UNAVAILABLE，定位不可用
8	ERR_POSITION_UNAVAILABLE，定位超时

定位方法代码示例

1浏览器定位

var map = new BMapGL.Map("allmap");
        var point = new BMapGL.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);
        
        var geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMapGL.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            }
            else {
                alert('failed' + this.getStatus());
            }        
        });

2IP定位

var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        alert("当前定位城市:" + cityName);
    }
    var myCity = new BMapGL.LocalCity();
    myCity.get(myFun);

3定位SDK辅助定位

var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
            
    var geolocation = new BMapGL.Geolocation();
    // 开启SDK辅助定位
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        }
        else {
            alert('failed' + this.getStatus());
        }        
    });

@@ 第1行： / 第1行： @@
 {{jspopularGL-sidebar}}
-<div class="h1-title">定位</div><div id="update-time">更新时间：2021年03月07日&nbsp;</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">
+<div class="h1-title">定位</div><div id="update-time1">更新时间：2021年03月07日&nbsp;</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">
-地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能。
+JavaScript API提供在Web端获取当前位置信息的方法，融合了浏览器定位、IP定位、安卓定位SDK辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息等功能。<br/>浏览器定位精度和性能依赖浏览器自身特性，IP定位的精度值为城市级别。<br/>对于安卓WebView页面的开发者，可以结合定位SDK进行辅助定位，使用方法参见[https://lbsyun.baidu.com/index.php?title=android-locsdk/guide/addition-func/assistant-h5 定位SDK相关章节]。
-https://mapopen-website-wiki.bj.bcebos.com/static/img/geocoding.png</div><!--jsapi-demo模板--><div class="jsapidemo_template"><!--展示地图区域--><div class="demo_area"><!--注释：默认展示效果（填写第一个按钮连接），避免延时--><div dir="https://lbsyun.baidu.com/jsdemo/demo/wAddressParseSingle.htm"></div></div><!--按钮区域--><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbsyun.baidu.com/jsdemo/demo/wAddressParseSingle.htm 地址解析]</div><div class="demo_btn" style="width:485px;">[https://lbsyun.baidu.com/jsdemo/demo/xRevAddressParseSingle.htm 逆地址解析]</div></div><!--右上角蓝色标签--可选--><div class="jsapi-demo-link">[http://lbsyun.baidu.com/jsdemo.htm#xRevAddressParseSingle DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">提供的转换类</div></div><div class="serve-explain-text">{{bluepoint}}Geocoder：逆/地址解析，用于坐标与地址间的相互转换。详情见[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a8b33 类参考]</div><div class="bluetitle"><div class="services-title-text">地址解析服务</div></div><div class="serve-explain-text">
+<div style="color:#f00">注意：<br/><div style="color:#f00">1.由于Chrome、iOS10以上系统等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。</div><div style="color:#f00">2.iOS15系统浏览器默认关闭位置请求，需要用户设置手机为允许/询问后方可获取精确的定位,定位权限的开启方式请参见[https://lbsyun.baidu.com/faq/search?id=223&title=688 iOS15定位问题]。</div><div style="color:#f00">3.由于浏览器原生定位成功率并不高，我们提供ip和安卓sdk定位进行辅助，如果定位精准在城市级别，可提供ak联系我们提高定位精准度。</div></div></div><!--jsapi-demo模板--><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>提供的定位服务</span></div></div></div><div class="serve-explain-text">
-{{bluepoint}}根据地址描述获得坐标信息。
+{| width="519" border="1"
+|-
-百度地图API提供Geocoder类进行地址解析，您可以通过Geocoder.getPoint()方法来将一段地址描述转换为一个坐标。 如下示例，我们将地址“北京市海淀区上地10街10号”转换获取该位置的地理经纬度坐标，并在这个位置上添加一个标注。 <span style="color:#FF0000;">注意：</span>在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市（本例为“北京市”）。
+| width="104" | '''接口'''
-</div><pre class="prettyprint codestyle">var map = new BMapGL.Map('container');
+| width="90" | '''类名'''
-map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12);
+| width="297" | '''说明'''
-//创建地址解析器实例
+|-
-var myGeo = new BMapGL.Geocoder();
+| 浏览器定位
-// 将地址解析结果显示在地图上，并调整地图视野
+| Geolocation
-myGeo.getPoint('北京市海淀区上地10街', function(point){
+| 优先调用浏览器H5定位接口，如果失败会调用IP定位
-    if(point){
+|-
-        map.centerAndZoom(point, 16);
+| IP定位
-        map.addOverlay(new BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
+| LocalCity
-    }else{
+| 根据用户IP 返回城市级别的定位结果
-        alert('您选择的地址没有解析到结果！');
+|-
-    }
+| 定位SDK辅助定位
-}, '北京市')
+| Geolocation
+| 当您的APP中有内置的Web页面，同时在Web页面需要提供您的当前位置信息时，可调用集成在App中的百度地图定位SDK来获取更精准的位置信息
+|}
+</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>状态码说明</span></div></div></div><div class="serve-explain-text">
+{| width="519" border="1"
+|-
+| width="60" | '''状态码'''
+| width="150" | '''说明'''
+|-
+| 6
+| ERR_PERMISSION_DENIED，没有权限，定位被拒绝
+|-
+| 2
+| ERR_POSITION_UNAVAILABLE，定位不可用
+|-
+| 8
+| ERR_POSITION_UNAVAILABLE，定位超时
+|}
+</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>定位方法代码示例</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>浏览器定位</div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: scroll;">var map = new BMapGL.Map("allmap");
+        var point = new BMapGL.Point(116.331398,39.897445);
+        map.centerAndZoom(point,12);
+        var geolocation = new BMapGL.Geolocation();
+        geolocation.getCurrentPosition(function(r){
+            if(this.getStatus() == BMAP_STATUS_SUCCESS){
+                var mk = new BMapGL.Marker(r.point);
+                map.addOverlay(mk);
+                map.panTo(r.point);
+                alert('您的位置：' + r.point.lng + ',' + r.point.lat);
+            }
+            else {
+                alert('failed' + this.getStatus());
+            }
+        });
 </pre>
-<div class="bluetitle"><div class="services-title-text">逆地址解析服务</div></div><div class="serve-explain-text">
+</div><div class="devguideorder"><span>2</span>IP定位</div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: scroll;">var map = new BMapGL.Map("allmap");
-{{bluepoint}}根据坐标点获得该地点的地址描述，是地址解析的逆向转换。 您可以通过Geocoder.getLocation()方法获得地址描述。当解析工作完成后，您提供的回调函数将会被触发。如果解析成功，则回调函数的参数为GeocoderResult对象，否则为null。
+    var point = new BMapGL.Point(116.331398,39.897445);
-</div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>指定经纬度获取地址</div><div class="devguidecenter"><pre class="prettyprint codestyle">var map = new BMapGL.Map("container");
+    map.centerAndZoom(point,12);
-map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
-// 创建地理编码实例
+    function myFun(result){
-var myGeo = new BMapGL.Geocoder();
+        var cityName = result.name;
-// 根据坐标得到地址描述
+        map.setCenter(cityName);
-myGeo.getLocation(new BMapGL.Point(116.364, 39.993), function(result){
+        alert("当前定位城市:" + cityName);
-    if (result){
+     }
-      alert(result.address);
+    var myCity = new BMapGL.LocalCity();
-     }
+    myCity.get(myFun);
-});
 </pre>
-</div><div class="devguideorder"><span>2</span>鼠标点击地图获取地址</div><div class="devguidecenter"><pre class="prettyprint codestyle">var map = new BMapGL.Map('container');
+</div><div class="devguideorder"><span>3</span>定位SDK辅助定位</div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: scroll;">var map = new BMapGL.Map("allmap");
-map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 13);
+    var point = new BMapGL.Point(116.331398,39.897445);
-var geoc = new BMapGL.Geocoder();
+    map.centerAndZoom(point,12);
-map.addEventListener('click', function(e){
-     var pt = e.latlng;
+    var geolocation = new BMapGL.Geolocation();
-     geoc.getLocation(pt, function(rs){
+    // 开启SDK辅助定位
-         var addComp = rs.addressComponents;
+     geolocation.enableSDKLocation();
-        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
+     geolocation.getCurrentPosition(function(r){
-    })
+         if(this.getStatus() == BMAP_STATUS_SUCCESS){
-})
+            var mk = new BMap.Marker(r.point);
+            map.addOverlay(mk);
+            map.panTo(r.point);
+            alert('您的位置：' + r.point.lng + ',' + r.point.lat);
+        }
+        else {
+            alert('failed' + this.getStatus());
+        }
+    });
 </pre>
 </div></div>

文档全面上新

2022年8月22日 (一) 16:32的最后版本