关于web地理定位的一些记录

732 views

大致思路有三种：

1. 微信公众号 请求返回的res.checkResult.getLocation 方法获取

因为没有appid，未测试...

2. 使用百度地图 new BMap.Geolocation() 获取位置

2.1. 先获取百度地图开发的AK 2.2. 在网页中引用脚本：

<script src="https://api.map.baidu.com/api?v=3.0&ak=你获取的ak"></script>

2.3. 使用：

<div id="map-container"></div>

var pointArr=[];
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var pt = new BMap.Point(r.longitude, r.latitude);//获取当前位置返回的点
            var convertor = new BMap.Convertor();//需要转换
            pointArr.push(pt);
            convertor.translate(pointArr, 2, 6,//2转6是盲测，这个转换后与实际位置最接近
                function (data) {
                    if (data.status === 0) {
                        var map = new BMap.Map("map-container");
                        var marker = new BMap.Marker(data.points[0]);//创建小红点
                        console.log('百度坐标：' + data.points[0].lng + ',' + data.points[0].lat);
                        map.addOverlay(marker);
                        map.centerAndZoom(data.points[0], 15); } //设置精度圈
                });
        } else {
            console.log('failed'+this.getStatus());
        }},{enableHighAccuracy: true});

3. 调用html5原生的 navigator.geolocation 获取位置,然后在百度地图上显示

可以通过 navigator.geolocation.getCurrentPosition（successCallback， errorCallback，options） 获取，也可以用 navigator.geolocation.watchPosition（successCallback， errorCallback，options） （可以在位置不变动的时候， avigator.geolocation.clearWatch(watchPosition事例) ）

successCallback
//watch前后点位没变化时，作为目前坐标，并将其显示在百度地图上
var id, options, pt;
var pointArr = [];
var target = {latitude: 0,longitude: 0};
function success(pos) {
    var crd = pos.coords;
    console.log(target.latitude + "," + crd.latitude + "," + target.longitude + "," + crd.longitude);
    if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
        console.log('Congratulations, got stable postion');
        navigator.geolocation.clearWatch(id);//停止检测，watchPosition方法赋值到id上
        pt = new BMap.Point(target.longitude, target.latitude);
        var convertor = new BMap.Convertor();
        pointArr.push(pt);
        convertor.translate(pointArr, 1, 5,
            function (data) {
                if (data.status === 0) {
                //校验：可以在百度坐标拾取器上通过这个坐标反查
                console.log('百度坐标：' + data.points[0].lng + ',' + data.points[0].lat);
                var map = new BMap.Map("container");
                var marker = new BMap.Marker(data.points[0]);//创建小红点
                map.addOverlay(marker);
                map.centerAndZoom(data.points[0], 15); } //设置精度圈，15可以看到身处在哪个街道，具体可按自己需求调整
        });
    } else {
    target.latitude = crd.latitude;
    target.longitude = crd.longitude;
    }
}
errorCallback
function (err) {console.warn('ERROR(' + err.code + '): ' + err.message);}
options
{enableHighAcuracy: true, //位置是否精确获取
    timeout: 50000, //获取位置允许的最长时间
    maximumAge: 1000} //多久更新获取一次位置

附录：

  • ** 坐标拾取系统**
  • ** 关于百度地图坐标转换 new BMap.Convertor().translate(coords,from,to,callback)中，from和to见百度地图→web服务API→坐标转换 **
  • ** 百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换 coordtransform github **

    如：h5转百度地图中的convertor.translate(point, 1, 5,callback)，就可以用wgs84togcj02,gcj02tobd09两个函数到得到类似结果（实测百度api转换和函数转换得到的坐标，第四位小数开始有点偏差，在百度坐标拾取器中显示的位置几乎相同） 地图坐标转换

from to
源坐标类型：
1：GPS标准坐标（wgs84）；
2：搜狗地图坐标；
3：火星坐标（gcj02），即高德地图、腾讯地图和MapABC等地图使用的坐标；
4：3中列举的地图坐标对应的墨卡托平面坐标;
5：百度地图采用的经纬度坐标（bd09ll）；
6：百度地图采用的墨卡托平面坐标（bd09mc）;
7：图吧地图坐标；
8：51地图坐标；		 目标坐标类型：
3：火星坐标（gcj02），即高德地图、腾讯地图及MapABC等地图使用的坐标；
5：百度地图采用的经纬度坐标（bd09ll）；
6：百度地图采用的墨卡托平面坐标（bd09mc）；		 
http://api.map.baidu.com/staticimage/v2?ak=你的AK&mcode=666666&center=经度,维度&width=600&height=600&zoom=15

静态地图生成助手 - ** navigator.geolocationAPI文档 **