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

百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)本文介绍了如何在百度地图中进行坐标拾取 包括使用百度地图地理坐标拾取系统 位置选择插件 数据导入 地理编码爬取 手机 GPS 定位以及位置纠偏

前言

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

@漏刻有时

今天的文章 百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)分享到此就结束了,感谢您的阅读。
编程小号
上一篇 2024-12-13 15:40
下一篇 2024-12-13 15:33

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ji-chu/85246.html