使用百度地图API将谷歌地图坐标转换为百度地图坐标

从谷歌地图坐标转换成百度地图坐标的。

http://api.map.baidu.com/ag/coord/convert?from=2&to=4&x=116.254615&y=29.814476返回格式:{"error":0,"x":"MTE2LjI2MTA5OTEyMjE=","y":"MjkuODIwNTYwODc0ODQ2"}

其中 x和y是经过base64编码的坐标,可以直接传递给BMap.Point的构造函数(自API 1.1版本开始支持),您也可以使用base64解码工具进行解码。

【百度地图API】如何批量转换为百度经纬度

因为我没有GPS坐标,就拿谷歌坐标做个示例了。

首先要注意的是,百度和谷歌的经纬度坐标顺序是相反的。

比如,谷歌的经纬度是

new google.maps.LatLng(39.90762965106183, 116.3786889372559)

传入坐标转换接口的百度经纬度应该是

new BMap.Point(116.3786889372559,39.90762965106183)

所以,我建立一个数组,存放转换前的经纬度。创建百度的坐标点,但是用谷歌的经纬度。

//注意:百度和谷歌的经纬度坐标顺序是相反的。
var points = [new BMap.Point(116.3786889372559,39.90762965106183),
              new BMap.Point(116.38632786853032,39.90795884517671),
              new BMap.Point(116.39534009082035,39.907432133833574),
              new BMap.Point(116.40624058825688,39.90789300648029),
              new BMap.Point(116.41413701159672,39.90795884517671)
             ];

然后调用官方公布的接口
BMap.Convertor.transMore(points,2,callback);

自己对这个坐标转换接口做了修改,让它可以多次返回结果。注意看注释部分。

据说,百度坐标转换接口,有50次/秒的限制。

function transMore(points,type,callback){
    for(var index in points){
        if(index > 50){return;}
        var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + 
        "&to=4&x=" + points[index].lng + //这里要循环读入数组points的lng数据,直到points.length完毕。
        "&y=" + points[index].lat + 
        "&callback=callback";
        //动态创建script标签
        load_script(xyUrl);
    }
}

进过上一步,坐标就转换好了。成为百度坐标了。但这时的百度坐标是加密的。看不懂……

好在,我们可以直接利用这些加密的编码创建出Marker标注点。获取到对象后,直接使用即可。

function callback(xyResult){ 
    if(xyResult.error != 0){return;}//出错就直接返回;
    var point = new BMap.Point(xyResult.x, xyResult.y);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    map.setCenter(point);// 由于写了这句,可以每一个被转的点都是中心点的过程
}

到这里,批量转换就讲完啦~~

下面说说我自己添加的其他功能:如何获取地图上的坐标点。

---------------------------------------------------------------------------------------------

如何获取地图上的坐标点,经纬度?

先说说谷歌的:给地图添加事件,点击地图后直接弹出。

google.maps.event.addListener(map, 'click', function(e) {
          alert(e.latLng);
        });

在说说百度的,也是给地图添加事件。

map.addEventListener("click",function(e){
    alert(e.point.lng + "," + e.point.lat);
});


大家发现谷歌和百度有什么不同了没有?

对了,谷歌的经纬度像是封装在一起了样。而百度的经纬度是分开地~~~


----------------------------------------------------------------------------------------

全部源代码:

有两个文件,一个是htm,另一个是修改后的官方坐标转换js。

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
  5. <script type="text/javascript"src="changeMore.js"></script>
  6. <title>批量转换坐标</title>
  7. </head>
  8. <body>
  9. <input onclick="magic();"value="批量转换"type="button"/>(据说有50次/秒的限制哦)<hr/>
  10. <div style="clear:both">
  11. <div style="float:left;">
  12. <h4>谷歌地图</h4>
  13. <div style="width:520px;height:340px;border:1px solid gray"id="map_canvas"></div>
  14. <p>鼠标点击的谷歌坐标是:<spanid="info"></span></p>
  15. <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  16. <script type="text/javascript">
  17. function initialize() {
  18. var myOptions = {
  19. zoom: 14,
  20. center: new google.maps.LatLng(39.90861722866082, 116.39679921252446),
  21. mapTypeId: google.maps.MapTypeId.ROADMAP
  22. };
  23. var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
  24. google.maps.event.addListener(map, 'click', function(e) {
  25. document.getElementById("info").innerHTML = e.latLng;
  26. });
  27. var marker1 = new google.maps.Marker({
  28. position: new google.maps.LatLng(39.90762965106183, 116.3786889372559),
  29. map: map
  30. });
  31. var marker2 = new google.maps.Marker({
  32. position: new google.maps.LatLng(39.90795884517671, 116.38632786853032),
  33. map: map
  34. });
  35. var marker3 = new google.maps.Marker({
  36. position: new google.maps.LatLng(39.907432133833574, 116.39534009082035),
  37. map: map
  38. });
  39. var marker4 = new google.maps.Marker({
  40. position: new google.maps.LatLng(39.90789300648029, 116.40624058825688),
  41. map: map
  42. });
  43. var marker5 = new google.maps.Marker({
  44. position: new google.maps.LatLng(39.90795884517671, 116.41413701159672),
  45. map: map
  46. });
  47. }
  48. google.maps.event.addDomListener(window, 'load', initialize);
  49. </script>
  50. </div>
  51. <div style="float:left;">
  52. <h4>百度地图</h4>
  53. <div style="width:520px;height:340px;border:1px solid gray"id="container"></div>
  54. <p>鼠标点击的百度坐标是:(<spanid="info2"></span></p>
  55. <script type="text/javascript"src="http://api.map.baidu.com/api?v=1.2"></script>
  56. <script type="text/javascript">
  57. var map = new BMap.Map("container");
  58. map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
  59. var i;
  60. var markers = [];
  61. map.addEventListener("click",function(e){
  62. document.getElementById("info2").innerHTML = e.point.lng + "," + e.point.lat;
  63. });
  64. //注意:百度和谷歌的经纬度坐标顺序是相反的。
  65. var points = [new BMap.Point(116.3786889372559,39.90762965106183),
  66. new BMap.Point(116.38632786853032,39.90795884517671),
  67. new BMap.Point(116.39534009082035,39.907432133833574),
  68. new BMap.Point(116.40624058825688,39.90789300648029),
  69. new BMap.Point(116.41413701159672,39.90795884517671)
  70. ];
  71. function callback(xyResult){
  72. if(xyResult.error != 0){return;}//出错就直接返回;
  73. var point = new BMap.Point(xyResult.x, xyResult.y);
  74. var marker = new BMap.Marker(point);
  75. map.addOverlay(marker);
  76. map.setCenter(point);// 由于写了这句,可以每一个被转的点都是中心点的过程
  77. }
  78. function magic(){
  79. BMap.Convertor.transMore(points,2,callback);
  80. }
  81. </script>
  82. </div>
  83. </div>
  84. </body>
  85. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <script type="text/javascript" src="changeMore.js"></script>
  6. <title>批量转换坐标</title>
  7. </head>
  8. <body>
  9. <input onclick="magic();" value="批量转换" type="button" />(据说有50次/秒的限制哦)<hr />
  10. <div style="clear:both">
  11. <div style="float:left;">
  12. <h4>谷歌地图</h4>
  13. <div style="width:520px;height:340px;border:1px solid gray" id="map_canvas"></div>
  14. <p>鼠标点击的谷歌坐标是:<span id="info"></span></p>
  15. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  16. <script type="text/javascript">
  17. function initialize() {
  18. var myOptions = {
  19. zoom: 14,
  20. center: new google.maps.LatLng(39.90861722866082, 116.39679921252446),
  21. mapTypeId: google.maps.MapTypeId.ROADMAP
  22. };
  23. var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
  24. google.maps.event.addListener(map, 'click', function(e) {
  25. document.getElementById("info").innerHTML = e.latLng;
  26. });
  27. var marker1 = new google.maps.Marker({
  28. position: new google.maps.LatLng(39.90762965106183, 116.3786889372559),
  29. map: map
  30. });
  31. var marker2 = new google.maps.Marker({
  32. position: new google.maps.LatLng(39.90795884517671, 116.38632786853032),
  33. map: map
  34. });
  35. var marker3 = new google.maps.Marker({
  36. position: new google.maps.LatLng(39.907432133833574, 116.39534009082035),
  37. map: map
  38. });
  39. var marker4 = new google.maps.Marker({
  40. position: new google.maps.LatLng(39.90789300648029, 116.40624058825688),
  41. map: map
  42. });
  43. var marker5 = new google.maps.Marker({
  44. position: new google.maps.LatLng(39.90795884517671, 116.41413701159672),
  45. map: map
  46. });
  47. }
  48. google.maps.event.addDomListener(window, 'load', initialize);
  49. </script>
  50. </div>
  51. <div style="float:left;">
  52. <h4>百度地图</h4>
  53. <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
  54. <p>鼠标点击的百度坐标是:(<span id="info2"></span></p>
  55. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
  56. <script type="text/javascript">
  57. var map = new BMap.Map("container");
  58. map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
  59. var i;
  60. var markers = [];
  61. map.addEventListener("click",function(e){
  62. document.getElementById("info2").innerHTML = e.point.lng + "," + e.point.lat;
  63. });
  64. //注意:百度和谷歌的经纬度坐标顺序是相反的。
  65. var points = [new BMap.Point(116.3786889372559,39.90762965106183),
  66. new BMap.Point(116.38632786853032,39.90795884517671),
  67. new BMap.Point(116.39534009082035,39.907432133833574),
  68. new BMap.Point(116.40624058825688,39.90789300648029),
  69. new BMap.Point(116.41413701159672,39.90795884517671)
  70. ];
  71. function callback(xyResult){
  72. if(xyResult.error != 0){return;}//出错就直接返回;
  73. var point = new BMap.Point(xyResult.x, xyResult.y);
  74. var marker = new BMap.Marker(point);
  75. map.addOverlay(marker);
  76. map.setCenter(point);// 由于写了这句,可以每一个被转的点都是中心点的过程
  77. }
  78. function magic(){
  79. BMap.Convertor.transMore(points,2,callback);
  80. }
  81. </script>
  82. </div>
  83. </div>
  84. </body>
  85. </html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="changeMore.js"></script>
<title>批量转换坐标</title>
</head>
<body>
<input οnclick="magic();" value="批量转换" type="button" />(据说有50次/秒的限制哦)<hr />
<div style="clear:both">
<div style="float:left;">
<h4>谷歌地图</h4>
<div style="width:520px;height:340px;border:1px solid gray" id="map_canvas"></div>
<p>鼠标点击的谷歌坐标是:<span id="info"></span></p>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
        var myOptions = {
          zoom: 14,
          center: new google.maps.LatLng(39.90861722866082, 116.39679921252446),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
        google.maps.event.addListener(map, 'click', function(e) {
          document.getElementById("info").innerHTML = e.latLng;
        });
        var marker1 = new google.maps.Marker({
          position: new google.maps.LatLng(39.90762965106183, 116.3786889372559),
          map: map
        });
        var marker2 = new google.maps.Marker({
          position: new google.maps.LatLng(39.90795884517671, 116.38632786853032),
          map: map
        });
        var marker3 = new google.maps.Marker({
          position: new google.maps.LatLng(39.907432133833574, 116.39534009082035),
          map: map
        });
        var marker4 = new google.maps.Marker({
          position: new google.maps.LatLng(39.90789300648029, 116.40624058825688),
          map: map
        });
        var marker5 = new google.maps.Marker({
          position: new google.maps.LatLng(39.90795884517671, 116.41413701159672),
          map: map
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
<div style="float:left;">
<h4>百度地图</h4>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>鼠标点击的百度坐标是:(<span id="info2"></span>)</p>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var i;
var markers = [];
map.addEventListener("click",function(e){
    document.getElementById("info2").innerHTML = e.point.lng + "," + e.point.lat;
});
//注意:百度和谷歌的经纬度坐标顺序是相反的。
var points = [new BMap.Point(116.3786889372559,39.90762965106183),
              new BMap.Point(116.38632786853032,39.90795884517671),
              new BMap.Point(116.39534009082035,39.907432133833574),
              new BMap.Point(116.40624058825688,39.90789300648029),
              new BMap.Point(116.41413701159672,39.90795884517671)
             ];
function callback(xyResult){ 
    if(xyResult.error != 0){return;}//出错就直接返回;
    var point = new BMap.Point(xyResult.x, xyResult.y);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    map.setCenter(point);// 由于写了这句,可以每一个被转的点都是中心点的过程
}
function magic(){
    BMap.Convertor.transMore(points,2,callback);
}
</script>
</div>
</div>
</body>
</html>

Html代码 复制代码 收藏代码
  1. //2011-7-25 zhangying
  2. (function(){
  3. function load_script(xyUrl, callback){
  4. var head = document.getElementsByTagName('head')[0];
  5. var script = document.createElement('script');
  6. script.type = 'text/javascript';
  7. script.src = xyUrl;
  8. //借鉴了jQuery的script跨域方法
  9. scriptscript.onload = script.onreadystatechange =function(){
  10. if((!this.readyState || this.readyState === "loaded" ||this.readyState === "complete")){
  11. callback && callback();
  12. // Handle memory leak in IE
  13. scriptscript.onload = script.onreadystatechange =null;
  14. if ( head && script.parentNode ) {
  15. head.removeChild( script );
  16. }
  17. }
  18. };
  19. // Use insertBefore instead of appendChild to circumvent an IE6 bug.
  20. head.insertBefore( script, head.firstChild );
  21. }
  22. function transMore(points,type,callback){
  23. for(var index in points){
  24. if(index > 50){return;}
  25. var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type +
  26. "&to=4&x=" + points[index].lng + //这里要循环读入数组points的lng数据,直到points.length完毕。
  27. "&y=" + points[index].lat +
  28. "&callbackcallback=callback";
  29. //动态创建script标签
  30. load_script(xyUrl);
  31. }
  32. }
  33. windowwindow.BMap = window.BMap || {};
  34. BMap.Convertor = {};
  35. BMap.Convertor.transMore = transMore;
  36. })();
  1. //2011-7-25 zhangying
  2. (function(){
  3. function load_script(xyUrl, callback){
  4. var head = document.getElementsByTagName('head')[0];
  5. var script = document.createElement('script');
  6. script.type = 'text/javascript';
  7. script.src = xyUrl;
  8. //借鉴了jQuery的script跨域方法
  9. script.onload = script.onreadystatechange = function(){
  10. if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
  11. callback && callback();
  12. // Handle memory leak in IE
  13. script.onload = script.onreadystatechange = null;
  14. if ( head && script.parentNode ) {
  15. head.removeChild( script );
  16. }
  17. }
  18. };
  19. // Use insertBefore instead of appendChild to circumvent an IE6 bug.
  20. head.insertBefore( script, head.firstChild );
  21. }
  22. function transMore(points,type,callback){
  23. for(var index in points){
  24. if(index > 50){return;}
  25. var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type +
  26. "&to=4&x=" + points[index].lng + //这里要循环读入数组points的lng数据,直到points.length完毕。
  27. "&y=" + points[index].lat +
  28. "&callback=callback";
  29. //动态创建script标签
  30. load_script(xyUrl);
  31. }
  32. }
  33. window.BMap = window.BMap || {};
  34. BMap.Convertor = {};
  35. BMap.Convertor.transMore = transMore;
  36. })();
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值