关于百度地图API的地图坐标转换问题

简介: 原文:关于百度地图API的地图坐标转换问题我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准确度不怎么精确,偏差很大。
原文: 关于百度地图API的地图坐标转换问题

我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准确度不怎么精确,偏差很大。这里我要更正下:

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。

由此可以看出小编之前冤枉了百度地图,所以如果对您有误导还请见谅。所以写了篇关于百度地图API坐标转换的文章,并且对之前的模型做了修正。

实现代码:

1 //在百度 map中显示地址
2     var map = new BMap.Map("map_canvas");
3     var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标  
4     map.centerAndZoom(point, 15);// 初始化地图,设置中心点坐标和地图级别  
5     var marker = new BMap.Marker(point);    
6     map.addOverlay(marker); 
7     BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标

回调函数代码:

1 //坐标转换完之后的回调函数
2 function translateCallback(point1){
3     var marker1 = new BMap.Marker(point1);
4     map.addOverlay(marker1);
5     var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});
6     marker1.setLabel(label); //添加百度label
7     map.setCenter(point1);
8 }

这是新的效果图:

可以看出转换出的效果还是相当精确的,并且从我这里的demo来看要比谷歌地图精确的多!所以如果也有像我一样的用户发现调用baidu map坐标有偏差的话,很有可能就是没有进行坐标转换。

关于这个demo:

在线查看demo 

 

demo代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 6 <title>GIS开发利用html5获取经纬度并在百度地图中查看</title>
 7 <!--加载百度 map api-->
 8 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8827ee39511568ac0705d037d67b2624"></script>  
 9 <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
10 </head>
11 
12 <body>
13 <span id="support">将下面的经纬度输入谷歌地图:</span>
14 <div id="show">
15 纬度:<span id="latitude"></span><br />
16 经度:<span id="longitude"></span><br />
17 准确度:<span id="accuracy"></span>
18 </div>
19 <div id="map_canvas" style="width:500px; height:500px;"></div>
20 <script type="text/javascript">
21 var doc = document,
22     latitude = doc.getElementById('latitude'),
23     longitude = doc.getElementById('longitude'),
24     accuracy = doc.getElementById('accuracy'),
25     support = doc.getElementById('support'),
26     showDiv = doc.getElementById('show');
27 var map = new BMap.Map("map_canvas");
28 function lodeSupport(){
29     if(navigator.geolocation){
30         support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置:';
31         showDiv.style.display = 'block';
32         navigator.geolocation.getCurrentPosition(updataPosition);
33     }else{
34         support.innerHTML = '对不起,浏览器不支持!';
35         showDiv.style.display = 'none';
36     }
37 }
38 function updataPosition(position){
39     var latitudeP = position.coords.latitude,
40         longitudeP = position.coords.longitude,
41         accuracyP = position.coords.accuracy;
42     latitude.innerHTML = latitudeP;
43     longitude.innerHTML = longitudeP;
44     accuracy.innerHTML = accuracyP;
45     //在百度 map中显示地址
46     
47     var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标  
48     map.centerAndZoom(point, 15);// 初始化地图,设置中心点坐标和地图级别  
49     var marker = new BMap.Marker(point);    
50     map.addOverlay(marker); 
51     BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标
52     
53 }
54 //坐标转换完之后的回调函数
55 function translateCallback(point1){
56     var marker1 = new BMap.Marker(point1);
57     map.addOverlay(marker1);
58     var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});
59     marker1.setLabel(label); //添加百度label
60     map.setCenter(point1);
61 }
62 
63 window.addEventListener('load', lodeSupport , true);
64 </script>
65 </body>
66 </html>

 

 转载自:http://malagis.com/baidu-maps-api-map-coordinate-conversion.html

 

目录
相关文章
|
2月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
2月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
2月前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
5月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
84 0
|
6月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
330 0
|
10天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
4天前
|
JSON 搜索推荐 API
京东店铺所有商品接口系列(京东 API)
本文介绍如何使用Python调用京东API获取店铺商品信息。前期需搭建Python环境,安装`requests`库并熟悉`json`库的使用。接口采用POST请求,参数包括`app_key`、`method`、`timestamp`、`v`、`sign`和业务参数`360buy_param_json`。通过示例代码展示如何生成签名并发送请求。应用场景涵盖店铺管理、竞品分析、数据统计及商品推荐系统,帮助商家优化运营和提升竞争力。
42 23
|
4天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
22 12
|
2天前
|
供应链 监控 数据挖掘
1688 商品详情接口系列(1688 API)
1688商品详情接口系列(1688 API)是阿里巴巴旗下批发电商平台提供的强大工具,支持开发者、商家获取商品的详细信息。通过商品基本信息、价格库存、图片和描述查询接口,用户可以精准高效地获取商品数据,涵盖电商运营、数据分析、市场调研等领域,极大提升工作效率。示例代码展示了如何使用Python调用这些接口,助力电商平台整合、价格监控、商品展示优化及库存管理等应用场景。
|
16天前
|
JSON API 数据格式
京东商品SKU价格接口(Jd.item_get)丨京东API接口指南
京东商品SKU价格接口(Jd.item_get)是京东开放平台提供的API,用于获取商品详细信息及价格。开发者需先注册账号、申请权限并获取密钥,随后通过HTTP请求调用API,传入商品ID等参数,返回JSON格式的商品信息,包括价格、原价等。接口支持GET/POST方式,适用于Python等语言的开发环境。
73 11