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

这篇具有很好参考价值的文章主要介绍了百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

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

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

在百度地图官方输入对应的地址或坐标,可以进行地理坐标之间的相互转化。
百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)

2.位置选择插件

在项目开发中,可以做弹窗跳转到官方地址拾取,也可以在官方提供的jsAPI的基础上进行二次开发,封装成单独的位置选择插件。如下:
百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)

百度地图经纬度选择插件

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

    /*百度地图经纬度选择插件*/
    $(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.数据导入

百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)
在项目完成测试后,如果遇到成千上百的地址时,一个一个的拾取,好像不是一个合格的开发者的所为。此时,就需要使用到地址解析和逆解析的API接口,即:在数据导入到数据库的过程中,自动批量地将地址转化为经纬度坐标,满足前端的调用。
百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)

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

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

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

4.地理编码

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

爬取百度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定位

百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)
手机自带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点位的修复。
百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)

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)
    })

@漏刻有时文章来源地址https://www.toymoban.com/news/detail-429479.html

到了这里,关于百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包