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

190 篇文章 6 订阅
143 篇文章 29 订阅

前言

在百度地图的标注开发中,最为关键的操作就是经纬度坐标信息的拾取。在不同的应用场景,坐标的拾取方式不同。现就常见的地理坐标拾取系统、地址定位点选插件、手机端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]);
            }
        });
    });

默认参数配置

  //配置参数
    var defaults = {
        lng: '',
        lat: '',
        marker: null,
        mapid: '',
        bdlng: 0,
        bdlng: 0,
        address: '',
        city: "杭州市",
        title: '地图选点',
        dobackcall: null,
    };

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");
?>

返回参数

{
    "status": 0,
    "result": {
      "location": {
        "lng": 116.30762232672,
        "lat": 40.056828485961
      },
      "precise": 1,
      "confidence": 80,
      "comprehension": 100,
      "level": "门址"
    }
  }

前端封装转换函数

    //自動獲取經緯度;
    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);
            }
        });
    }

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

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//设置缓存有效时间,在该时间段内,获取的地理位置信息还是设置此时间段之前的那次获得的信息,超过这段时间缓存的位置信息会被废弃
            });
        }

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>

经纬度纠偏

    // 百度地图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)
    })

@漏刻有时

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漏刻有时

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值