自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

百度地圖API如何批量轉(zhuǎn)換為百度經(jīng)緯度

作者：酸奶小妹
開發(fā) 前端
百度地圖API的官網(wǎng)上提供了常用坐標(biāo)轉(zhuǎn)換的示例。但是，一次只能轉(zhuǎn)換一個(gè)，真的非常麻煩??！這里結(jié)合了官方的示例，自制一個(gè)批量轉(zhuǎn)換工具，供大家參考。

　　百度地圖API的官網(wǎng)上提供了常用坐標(biāo)轉(zhuǎn)換的示例。但是，一次只能轉(zhuǎn)換一個(gè)，真的非常麻煩?。∵@里結(jié)合了官方的示例，自制一個(gè)批量轉(zhuǎn)換工具，供大家參考。

因?yàn)槲覜]有GPS坐標(biāo)，就拿谷歌坐標(biāo)做個(gè)示例了。

　　首先要注意的是，百度和谷歌的經(jīng)緯度坐標(biāo)順序是相反的。

　　比如，谷歌的經(jīng)緯度是

　　newgoogle.maps.LatLng(39.90762965106183, 116.3786889372559)

　　傳入坐標(biāo)轉(zhuǎn)換接口的百度經(jīng)緯度應(yīng)該是

　　newBMap.Point(116.3786889372559,39.90762965106183)

　　所以，我建立一個(gè)數(shù)組，存放轉(zhuǎn)換前的經(jīng)緯度。創(chuàng)建百度的坐標(biāo)點(diǎn)，但是用谷歌的經(jīng)緯度。

  1. 　　//注意：百度和谷歌的經(jīng)緯度坐標(biāo)順序是相反的。  
  2. 　　varpoints = [newBMap.Point(116.3786889372559,39.90762965106183),  
  3. 　　newBMap.Point(116.38632786853032,39.90795884517671),  
  4. 　　newBMap.Point(116.39534009082035,39.907432133833574),  
  5. 　　newBMap.Point(116.40624058825688,39.90789300648029),  
  6. 　　newBMap.Point(116.41413701159672,39.90795884517671)  
  7. 　　]; 

　　然后調(diào)用官方公布的接口

　　BMap.Convertor.transMore(points,2,callback);

　　自己對這個(gè)坐標(biāo)轉(zhuǎn)換接口做了修改，讓它可以多次返回結(jié)果。注意看注釋部分。

　　據(jù)說，百度坐標(biāo)轉(zhuǎn)換接口，有50次/秒的限制。

  1. 　　functiontransMore(points,type,callback){  
  2. 　　for(varindex inpoints){  
  3. 　　if(index >50){return;}  
  4. 　　varxyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type +  
  5. 　　"&to=4&x=" + points[index].lng + //這里要循環(huán)讀入數(shù)組points的lng數(shù)據(jù)，直到points.length完畢。  
  6. 　　"&y=" + points[index].lat +  
  7. 　　"&callback=callback";  
  8. 　　//動(dòng)態(tài)創(chuàng)建script標(biāo)簽  
  9. 　　load_script(xyUrl);  
  10. 　　}  
  11. 　} 

　　進(jìn)過上一步，坐標(biāo)就轉(zhuǎn)換好了。成為百度坐標(biāo)了。但這時(shí)的百度坐標(biāo)是加密的。看不懂……

　　好在，我們可以直接利用這些加密的編碼創(chuàng)建出Marker標(biāo)注點(diǎn)。獲取到對象后，直接使用即可。

  1. 　　functioncallback(xyResult){  
  2. 　　if(xyResult.error != 0){return;}//出錯(cuò)就直接返回;  
  3. 　　varpoint = newBMap.Point(xyResult.x, xyResult.y);  
  4. 　　varmarker = newBMap.Marker(point);  
  5. 　　map.addOverlay(marker);  
  6. 　　map.setCenter(point);//由于寫了這句，可以每一個(gè)被轉(zhuǎn)的點(diǎn)都是中心點(diǎn)的過程  
  7. 　　} 

　　到這里，批量轉(zhuǎn)換就講完啦~~

　　下面說說我自己添加的其他功能：如何獲取地圖上的坐標(biāo)點(diǎn)。

　　如何獲取地圖上的坐標(biāo)點(diǎn)，經(jīng)緯度？

　　先說說谷歌的：給地圖添加事件,點(diǎn)擊地圖后直接彈出。

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

　　在說說百度的，也是給地圖添加事件。

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

　　大家發(fā)現(xiàn)谷歌和百度有什么不同了沒有？

　　對了，谷歌的經(jīng)緯度像是封裝在一起了樣。而百度的經(jīng)緯度是分開地~~~

　　全部源代碼：

　　有兩個(gè)文件，一個(gè)是htm，另一個(gè)是修改后的官方坐標(biāo)轉(zhuǎn)換js。

　　批量轉(zhuǎn)換.htm

  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>批量轉(zhuǎn)換坐標(biāo)</title> 
  7. 　　</head> 
  8. 　　<body> 
  9. 　　<input onclick="magic();"value="批量轉(zhuǎn)換"type="button"/>（據(jù)說有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>鼠標(biāo)點(diǎn)擊的谷歌坐標(biāo)是：<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. 　　functioninitialize() {varmyOptions ={  
  18. 　　zoom: 14,  
  19. 　　center: newgoogle.maps.LatLng(39.90861722866082, 116.39679921252446),  
  20. 　　mapTypeId: google.maps.MapTypeId.ROADMAP  
  21. 　　};varmap =newgoogle.maps.Map(document.getElementById('map_canvas'),myOptions);  
  22. 　　google.maps.event.addListener(map, 'click', function(e) {  
  23. 　　document.getElementById("info").innerHTML =e.latLng;  
  24. 　　});varmarker1 =newgoogle.maps.Marker({  
  25. 　　position: newgoogle.maps.LatLng(39.90762965106183, 116.3786889372559),  
  26. 　　map: map  
  27. 　　});varmarker2 =newgoogle.maps.Marker({  
  28. 　　position: newgoogle.maps.LatLng(39.90795884517671, 116.38632786853032),  
  29. 　　map: map  
  30. 　　});varmarker3 =newgoogle.maps.Marker({  
  31. 　　position: newgoogle.maps.LatLng(39.907432133833574, 116.39534009082035),  
  32. 　　map: map  
  33. 　　});varmarker4 =newgoogle.maps.Marker({  
  34. 　　position: newgoogle.maps.LatLng(39.90789300648029, 116.40624058825688),  
  35. 　　map: map  
  36. 　　});varmarker5 =newgoogle.maps.Marker({  
  37. 　　position: newgoogle.maps.LatLng(39.90795884517671, 116.41413701159672),  
  38. 　　map: map  
  39. 　　});  
  40. 　　}  
  41. 　　google.maps.event.addDomListener(window, 'load', initialize);</script> 
  42. 　　</div> 
  43. 　　<div style="float:left;"> 
  44. 　　<h4>百度地圖</h4> 
  45. 　　<div style="width:520px;height:340px;border:1px solid gray"id="container"></div> 
  46. 　　<p>鼠標(biāo)點(diǎn)擊的百度坐標(biāo)是：（<span id="info2"></span>）</p> 
  47. 　　<script type="text/javascript"src="http://api.map.baidu.com/api?v=1.2"></script> 
  48. <script type="text/javascript"> 
  49. 　　varmap =newBMap.Map("container");  
  50. 　　map.centerAndZoom(newBMap.Point(116.404, 39.915), 15);vari;varmarkers =[];  
  51. 　　map.addEventListener("click",function(e){  
  52. 　　document.getElementById("info2").innerHTML =e.point.lng +","+e.point.lat;  
  53. 　　});//注意：百度和谷歌的經(jīng)緯度坐標(biāo)順序是相反的。  
  54. 　　varpoints =[newBMap.Point(116.3786889372559,39.90762965106183),newBMap.Point(116.38632786853032,39.90795884517671),newBMap.Point(116.39534009082035,39.907432133833574),newBMap.Point(116.40624058825688,39.90789300648029),newBMap.Point(116.41413701159672,39.90795884517671)  
  55. 　　];functioncallback(xyResult){ if(xyResult.error !=0){return;}//出錯(cuò)就直接返回;varpoint =newBMap.Point(xyResult.x, xyResult.y);varmarker =newBMap.Marker(point);  
  56. 　　map.addOverlay(marker);  
  57. 　　map.setCenter(point);//由于寫了這句，可以每一個(gè)被轉(zhuǎn)的點(diǎn)都是中心點(diǎn)的過程  
  58. 　　}functionmagic(){  
  59. 　　BMap.Convertor.transMore(points,2,callback);  
  60. 　　}</script> 
  61. 　　</div> 
  62. 　　</div> 
  63. 　　</body> 
  64. 　　</html> 
  65. 　　changeMore.js  
  66. 　　//2011-7-25 zhangying  
  67. 　　(function(){  
  68. 　　functionload_script(xyUrl, callback){  
  69. 　　varhead = document.getElementsByTagName('head')[0];  
  70. 　varscript = document.createElement('script');  
  71. 　　script.type = 'text/javascript';  
  72. 　　script.src = xyUrl;  
  73. 　　//借鑒了jQuery的script跨域方法  
  74. 　　scriptscript.onload = script.onreadystatechange = function(){  
  75. 　　if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){  
  76. 　　callback &&callback();  
  77. 　　//Handle memory leak in IE  
  78. 　　scriptscript.onload = script.onreadystatechange = null;  
  79. 　　if( head &&script.parentNode ) {  
  80. 　　head.removeChild( script );  
  81. 　　}  
  82. 　　}  
  83. 　　};  
  84. 　　//Use insertBefore instead of appendChild to circumvent an IE6 bug.  
  85. 　　head.insertBefore( script, head.firstChild );  
  86. 　　}  
  87. 　　functiontransMore(points,type,callback){  
  88. 　　for(varindex inpoints){  
  89. 　　if(index >50){return;}  
  90. 　　varxyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type +  
  91. 　　"&to=4&x=" + points[index].lng + //這里要循環(huán)讀入數(shù)組points的lng數(shù)據(jù)，直到points.length完畢。  
  92. 　　"&y=" + points[index].lat +  
  93. 　　"&callbackcallback=callback";  
  94. 　　//動(dòng)態(tài)創(chuàng)建script標(biāo)簽  
  95. 　　load_script(xyUrl);  
  96. 　　}  
  97. 　　}  
  98. 　　windowwindow.BMap = window.BMap || {};  
  99. 　　BMap.Convertor = {};  
  100. 　　BMap.Convertor.transMore = transMore;  
  101. 　　})(); 

原文鏈接：http://www.cnblogs.com/milkmap/archive/2011/09/29/2195780.html

【編輯推薦】

  1. 詳解百度地圖API之地圖標(biāo)注
  2. 百度地圖API之如何制作駕車導(dǎo)航
  3. 詳解百度地圖API之地圖操作
  4. 詳解百度地圖API之自定義地圖類型
  5. 怎么成為一個(gè)軟件架構(gòu)師
責(zé)任編輯：彭凡 來源： 博客園
百度地圖API
相關(guān)推薦

2011-09-29 11:00:54

百度地圖API

2011-10-21 10:16:25

百度地圖API

2011-09-16 14:39:02

百度地圖API

2011-10-24 14:01:29

API

2011-09-16 10:37:42

地圖API

2011-09-26 10:05:19

百度地圖API

2012-02-01 09:33:36

百度地圖API

2014-07-25 17:12:39

數(shù)據(jù)庫WOT2014MongoDB

2013-08-22 17:08:50

2011-10-09 11:07:40

百度地圖API

2012-05-28 22:51:53

百度

2013-04-08 14:59:54

Android學(xué)習(xí)筆記百度地圖Overlay

2018-09-06 18:37:45

百度云

2011-10-21 09:11:41

百度地圖API

2014-09-04 02:25:24

百度世界大會(huì)2014直達(dá)號(hào)BaiduEye

2012-10-19 09:47:30

百度云百度音樂云計(jì)算

2013-06-27 10:23:30

百度云百度開放云

2016-03-25 11:18:23

中華網(wǎng)

2020-12-03 06:13:46

iOS

2011-06-03 16:04:05

SEO分詞
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)