百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)_百度地图坐标拾取

前言

在百度地图的标注开发中，最为关键的操作就是经纬度坐标信息的拾取。在不同的应用场景，坐标的拾取方式不同。现就常见的地理坐标拾取系统、地址定位点选插件、手机端GPS实时定位、数据导入、地理编码、位置纠偏等做全面的介绍。

1.百度地图地理坐标拾取系统

传送门：http://api.map.baidu.com/lbsapi/getpoint/index.html

在百度地图官方输入对应的地址或坐标，可以进行地理坐标之间的相互转化。

2.位置选择插件

在项目开发中，可以做弹窗跳转到官方地址拾取，也可以在官方提供的jsAPI的基础上进行二次开发，封装成单独的位置选择插件。如下：

百度地图经纬度选择插件

该插件可实现地址定位、关键词搜索和标注移动选择位置，并自动获取经纬度坐标数据信息、省、地、市等地址信息。在页面开发中，使用封装函数进行自动填充即可。

    /*百度地图经纬度选择插件*/
    $(function () {
        $("#L_lnglat").baidumapaddress({
            dobackcall: function (address, wgs, baidu) {
                //console.log("地址：" + address);
                $("#L_poi_province").val(address.split(" ")[0]);
                $("#L_poi_city").val(address.split(" ")[1]);
                $("#L_poi_county").val(address.split(" ")[2]);
                $("#L_poi_address").val(address.split(" ")[3]+address.split(" ")[4]);
            }
        });
    });

1
2
3
4
5
6
7
8
9
10
11
12
13

默认参数配置

  //配置参数
    var defaults = {
        lng: '',
        lat: '',
        marker: null,
        mapid: '',
        bdlng: 0,
        bdlng: 0,
        address: '',
        city: "杭州市",
        title: '地图选点',
        dobackcall: null,
    };
1
2
3
4
5
6
7
8
9
10
11
12
13

3.数据导入

在项目完成测试后，如果遇到成千上百的地址时，一个一个的拾取，好像不是一个合格的开发者的所为。此时，就需要使用到地址解析和逆解析的API接口，即：在数据导入到数据库的过程中，自动批量地将地址转化为经纬度坐标，满足前端的调用。

注意事项：
excel中若提供经纬度的，将会在地图精准定位。但要选对您经纬度数据的所属坐标系。
excel中若提供地名地址去地图查找定位，位置精确度依赖于您所提供地名地址信息的完整性、同时也依赖于百度或高德地图所含地址信息的全面性。因此，如果您所提供的部分地址导入后未能在地图上准确定位，属于正常现象。对此功能有苛刻要求的，请勿用。

提示：有大量记录的excel，建议拆分成每个1000个以内分次导入。

批量地理编码参考资料：《python对接API二次开发高级实战案例解析：百度地图Web服务API封装函数（行政区划区域检索、地理编码、国内天气查询、IP定位、坐标转换）》

4.地理编码

爬取百度webAPI

用户可通过该功能，将结构化地址（省/市/区/街道/门牌号）解析为对应的位置坐标。地址结构越完整，地址内容越准确，解析的坐标精度越高。

注意事项：

• 待解析的地址。最多支持84个字节。可以输入两种样式的值，分别是：1、标准的结构化地址信息，如北京市海淀区上地十街十号【推荐，地址结构越完整，解析精度越高】2、支持“路与路交叉口”描述方式，如北一环路和阜阳路的交叉路口第二种方式并不总是有返回结果，只有当地址库中存在该地址描述时才有返回。
• 误差说明：
  描述打点绝对精度（即坐标点的误差范围）。
  confidence=100，解析误差绝对精度小于20m；
  confidence≥90，解析误差绝对精度小于50m；
  confidence≥80，解析误差绝对精度小于100m；
  confidence≥75，解析误差绝对精度小于200m；
  confidence≥70，解析误差绝对精度小于300m；
  confidence≥60，解析误差绝对精度小于500m；
  confidence≥50，解析误差绝对精度小于1000m；
  confidence≥40，解析误差绝对精度小于2000m；
  confidence≥30，解析误差绝对精度小于5000m；
  confidence≥25，解析误差绝对精度小于8000m；
  confidence≥20，解析误差绝对精度小于10000m；

/*地址转坐标封装函数，文件名称为points.php
*$address，需要转化的地址，越详细经纬度精度越高；
 */
<?php 
    // 此处填写你在控制台-应用管理-创建应用后获取的AK
    $ak = '您的AK';
    
    // 发起一个http get请求，并返回请求的结果
    // $url字段为请求的地址
    // $param字段为请求的参数
    function request_get($url = '', $param = array()) {
        if (empty($url) || empty($param)) {
            return false;
        }
        
        $getUrl = $url . "?" . http_build_query($param);
        $curl = curl_init(); // 初始化curl
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查   
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2); // 从证书中检查SSL加密算法是否存在
        curl_setopt($curl, CURLOPT_URL, $getUrl); // 抓取指定网页
        curl_setopt($curl, CURLOPT_TIMEOUT, 1000); // 设置超时时间1秒
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // curl不直接输出到屏幕
        curl_setopt($curl, CURLOPT_HEADER, 0); // 设置header
        $data = curl_exec($curl); // 运行curl

        if (!$data) {
            print("an error occured in function request_get(): " . curl_error($curl) . "\n");
        }

        curl_close($curl);
        
        return $data;
    }

    // 请求地址
    $url = 'https://api.map.baidu.com/geocoding/v3';
    
    // 构造请求参数
    $param['address']   = '北京市海淀区上地十街10号';
    $param['output']   = 'json';
    $param['ak']   = $ak;
    $param['callback']   = 'showLocation';

    $res = request_get($url, $param);

    // 将原始返回的结果打印出来
    print("请求的原始返回结果为:\n");
    print($res . "\n");
?>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

返回参数

{
    "status": 0,
    "result": {
      "location": {
        "lng": 116.30762232672,
        "lat": 40.056828485961
      },
      "precise": 1,
      "confidence": 80,
      "comprehension": 100,
      "level": "门址"
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

前端封装转换函数

    //自動獲取經緯度;
    var getAddress = function transAddress() {
        var address = $("#address").val();
        getPoints(address);
    }

    //前端页面输出;
    function getPoints(address) {
        $.getJSON("points.php", {address: address}, function (res) {
            if (res.status == 0) {
                $("#lng").val(res.result.location.lng);
                $("#lat").val(res.result.location.lat);
            } else {
                $("#message").html(res.message);
            }
        });
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在输入地址数据的时候，一定要是省市区街道门牌号，地址越详细精度越高，否则会解析不出来，谨记！

5.手机GPS定位

手机自带GPS定位，通过BMap.Geolocation类，在手机访问页面时，允许使用自动定位功能。则系统会自动调用定位信息，并将纬度坐标数据信息、省、地、市等地址信息自动填入表单中。同时，页面的标注可以自由拖动，实现手动调整，让定位更加精准。

GPS定位

//自动定位;
        function bdGeo() {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    //var mk = new BMap.Marker(r.point);
                    map.clearOverlays();
                    map.panTo(r.point);
                    console.log(r.address);
                    $("#L_poi_province").val(r.address.province);
                    $("#L_poi_city").val(r.address.city);
                    $("#L_poi_county").val(r.address.district);
                    $("#L_lnglat").val(r.point.lng+","+r.point.lat);
                    var points=new BMap.Point(r.point.lng, r.point.lat);
                    //返回当前中心点;
                    map.centerAndZoom(points, 16);
                    //添加标注;
                    var marker = new BMap.Marker(points);
                    map.addOverlay(marker);
                    marker.enableDragging();
                    marker.addEventListener('dragend', function () {
 $("#L_lnglat").val(marker.getPosition().lng+","+marker.getPosition().lat)
                    })}
                else {
                    alert('failed' + this.getStatus());
                }
            },function (error) {
                console.log(error);
            },{
                enableHighAccuracy: true,//是否要求高精度的地理位置信息
                timeout: 1000,//对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
                maximumAge:0//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃
            });
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

6.位置纠偏

位置纠偏，是所有定位后的后台调整功能，给予管理员或数据管理员审核POI点位的修复。

html容器

<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">经纬度信息</label>
                <div class="layui-input-inline"><input type="text" name="points" id="points" lay-verify="required" autocomplete="off" class="layui-input" value="113.351986,23.159751"></div><input type="hidden" id="poi_id" value="4211">
                <button class="layui-btn" lay-filter="add" lay-submit="" id="L_add" type="submit">确定提交</button> * 拖动标注即可自动纠偏</div>
            </div>
        </div>
        <div id="l-map"></div>
    </form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

经纬度纠偏

    // 百度地图API功能
    var map = new BMap.Map("l-map");
    var point = new BMap.Point(113.351986, 23.159751);
    map.centerAndZoom(point, 17);
    map.enableScrollWheelZoom(true);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    marker.enableDragging();
    marker.addEventListener('dragend', function () {
        //console.log(marker.getPosition().lat);
        $("#points").val(marker.getPosition().lng+","+marker.getPosition().lat)
    })
1
2
3
4
5
6
7
8
9
10
11
12

@漏刻有时