前言
在百度地图的标注开发中,最为关键的操作就是经纬度坐标信息的拾取。在不同的应用场景,坐标的拾取方式不同。现就常见的地理坐标拾取系统、地址定位点选插件、手机端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点位的修复。
文章来源:https://www.toymoban.com/news/detail-429479.html
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模板网!