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

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

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

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

实现代码：

 //在百度 map中显示地址

     var map = new BMap.Map("map_canvas");

     var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标

     map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别

     var marker = new BMap.Marker(point);

     map.addOverlay(marker);

     BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标

回调函数代码：

 //坐标转换完之后的回调函数

 function translateCallback(point1){

     var marker1 = new BMap.Marker(point1);

     map.addOverlay(marker1);

     var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});

     marker1.setLabel(label); //添加百度label

     map.setCenter(point1);

 }

这是新的效果图:

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

关于这个demo：

在线查看demo

demo代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>GIS开发利用html5获取经纬度并在百度地图中查看</title>

 <!--加载百度 map api-->

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8827ee39511568ac0705d037d67b2624"></script>

 <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

 </head>

 <body>

 <span id="support">将下面的经纬度输入谷歌地图：</span>

 <div id="show">

 纬度：<span id="latitude"></span><br />

 经度：<span id="longitude"></span><br />

 准确度：<span id="accuracy"></span>

 </div>

 <div id="map_canvas" style="width:500px; height:500px;"></div>

 <script type="text/javascript">

 var doc = document,

     latitude = doc.getElementById('latitude'),

     longitude = doc.getElementById('longitude'),

     accuracy = doc.getElementById('accuracy'),

     support = doc.getElementById('support'),

     showDiv = doc.getElementById('show');

 var map = new BMap.Map("map_canvas");

 function lodeSupport(){

     if(navigator.geolocation){

         support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：';

         showDiv.style.display = 'block';

         navigator.geolocation.getCurrentPosition(updataPosition);

     }else{

         support.innerHTML = '对不起，浏览器不支持！';

         showDiv.style.display = 'none';

     }

 }

 function updataPosition(position){

     var latitudeP = position.coords.latitude,

         longitudeP = position.coords.longitude,

         accuracyP = position.coords.accuracy;

     latitude.innerHTML = latitudeP;

     longitude.innerHTML = longitudeP;

     accuracy.innerHTML = accuracyP;

     //在百度 map中显示地址

     var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标

     map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别

     var marker = new BMap.Marker(point);

     map.addOverlay(marker);

     BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标

 }

 //坐标转换完之后的回调函数

 function translateCallback(point1){

     var marker1 = new BMap.Marker(point1);

     map.addOverlay(marker1);

     var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});

     marker1.setLabel(label); //添加百度label

     map.setCenter(point1);

 }

 window.addEventListener('load', lodeSupport , true);

 </script>

 </body>

 </html>

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

关于百度地图API的地图坐标转换问题的更多相关文章

  1. ***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)

    微信公众平台开发 - 获取用户地理位置 本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口 开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...

  2. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  3. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  4. 百度地图API地理位置和坐标转换

    1.由地名(省份.城市.街道等)得到其对应的百度地图坐标: http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&a ...

  5. 百度地图api根据地图缩放等级显示不同的marker点，功能二

    功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...

  6. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  7. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  8. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  9. 百度地图API实现地图定位

    1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...

随机推荐

  1. ASP.NET 4.0 来了

    伴随着VS2010的公开测试,ASP.NET4.0也进入了我们的视线.ASP.NET4.0究竟给我们带来了什么,将在哪些方面提高我们的生产力? 在何时你需要使用ASP.NET4.0开发你的网站程序? ...

  2. powerdesign设置实体显示格式

    工具-显示参数选择中,如下图:

  3. IO流详解之代码详解

    前面呢已经发了一些理解,整理了注释,整体来说IO这里难度不是很大,代码呢没有详细敲,只写了一个大概总结的内容如下: /** 一切皆文件:文件是所有操作系统保存数据和处理逻辑的唯一方式:不管是.exe, ...

  4. HTTP 和 Socket 的区别

    要弄明白 http 和 socket 首先要熟悉网络七层:物 数 网 传 会 表 应,如图1 如图1 HTTP 协议:超文本传输协议,对应于应用层,用于如何封装数据. TCP/UDP 协议:传输控制协 ...

  5. [jquery]基础篇--this与$this区别

    参考: http://www.cnblogs.com/hannover/p/4109779.html 1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(t ...

  6. Json操作

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. linux系统制作简单流程

    制作嵌入式平台使用的Linux内 核, 方法和制作PC平台 的Linux内 核基本一致, 下面使用 对比的方式介绍如何制作用 于6410开发板的内 核. 1. 清除原有配置与中间文件x86: make ...

  8. prefix和unprefix

    exports._esModule = true; exports.default = { prefix: function prefix(prop){ if (prop[0] === '-'){ v ...

  9. 青瓷qici - H5小游戏 抽奖机 “one-arm bandit”

    写在前面 本文实现一个简单的抽奖效果,使用青瓷qici引擎,其中应用了Tween动画,粒子系统,遮罩,UI界面布局,项目设置,发布等功能呢. 目前开发采用1.0.7版本,后续如果界面有所变化请参考这个 ...

  10. margin系列之百分比

    本系列摘自  px; height: 600px; } #demo p{ margin: 10% 5%; } HTML: <div id="demo"> <p&g ...