百度地圖API如何批量轉換為百度經緯度
作者：酸奶小妹
百度地圖API的官網上提供了常用坐標轉換的示例。但是，一次只能轉換一個，真的非常麻煩??！這里結合了官方的示例，自制一個批量轉換工具，供大家參考。
百度地圖API的官網上提供了常用坐標轉換的示例。但是，一次只能轉換一個，真的非常麻煩??！這里結合了官方的示例，自制一個批量轉換工具，供大家參考。
因為我沒有GPS坐標，就拿谷歌坐標做個示例了。
首先要注意的是，百度和谷歌的經緯度坐標順序是相反的。
比如，谷歌的經緯度是
newgoogle.maps.LatLng(39.90762965106183, 116.3786889372559)
傳入坐標轉換接口的百度經緯度應該是
newBMap.Point(116.3786889372559,39.90762965106183)
所以，我建立一個數組，存放轉換前的經緯度。創建百度的坐標點，但是用谷歌的經緯度。
- //注意：百度和谷歌的經緯度坐標順序是相反的。
- 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)
- ];
然后調用官方公布的接口
BMap.Convertor.transMore(points,2,callback);
自己對這個坐標轉換接口做了修改，讓它可以多次返回結果。注意看注釋部分。
據說，百度坐標轉換接口，有50次/秒的限制。
- functiontransMore(points,type,callback){
- for(varindex inpoints){
- if(index >50){return;}
- varxyUrl = "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標注點。獲取到對象后，直接使用即可。
- functioncallback(xyResult){
- if(xyResult.error != 0){return;}//出錯就直接返回;
- varpoint = newBMap.Point(xyResult.x, xyResult.y);
- varmarker = newBMap.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。
批量轉換.htm
- <!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 onclick="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">
- functioninitialize() {varmyOptions ={
- zoom: 14,
- center: newgoogle.maps.LatLng(39.90861722866082, 116.39679921252446),
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };varmap =newgoogle.maps.Map(document.getElementById('map_canvas'),myOptions);
- google.maps.event.addListener(map, 'click', function(e) {
- document.getElementById("info").innerHTML =e.latLng;
- });varmarker1 =newgoogle.maps.Marker({
- position: newgoogle.maps.LatLng(39.90762965106183, 116.3786889372559),
- map: map
- });varmarker2 =newgoogle.maps.Marker({
- position: newgoogle.maps.LatLng(39.90795884517671, 116.38632786853032),
- map: map
- });varmarker3 =newgoogle.maps.Marker({
- position: newgoogle.maps.LatLng(39.907432133833574, 116.39534009082035),
- map: map
- });varmarker4 =newgoogle.maps.Marker({
- position: newgoogle.maps.LatLng(39.90789300648029, 116.40624058825688),
- map: map
- });varmarker5 =newgoogle.maps.Marker({
- position: newgoogle.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">
- varmap =newBMap.Map("container");
- map.centerAndZoom(newBMap.Point(116.404, 39.915), 15);vari;varmarkers =[];
- map.addEventListener("click",function(e){
- document.getElementById("info2").innerHTML =e.point.lng +","+e.point.lat;
- });//注意：百度和谷歌的經緯度坐標順序是相反的。
- 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)
- ];functioncallback(xyResult){ if(xyResult.error !=0){return;}//出錯就直接返回;varpoint =newBMap.Point(xyResult.x, xyResult.y);varmarker =newBMap.Marker(point);
- map.addOverlay(marker);
- map.setCenter(point);//由于寫了這句，可以每一個被轉的點都是中心點的過程
- }functionmagic(){
- BMap.Convertor.transMore(points,2,callback);
- }</script>
- </div>
- </div>
- </body>
- </html>
- changeMore.js
- //2011-7-25 zhangying
- (function(){
- functionload_script(xyUrl, callback){
- varhead = document.getElementsByTagName('head')[0];
- varscript = document.createElement('script');
- script.type = 'text/javascript';
- script.src = xyUrl;
- //借鑒了jQuery的script跨域方法
- scriptscript.onload = script.onreadystatechange = function(){
- if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
- callback &&callback();
- //Handle memory leak in IE
- scriptscript.onload = script.onreadystatechange = null;
- if( head &&script.parentNode ) {
- head.removeChild( script );
- }
- }
- };
- //Use insertBefore instead of appendChild to circumvent an IE6 bug.
- head.insertBefore( script, head.firstChild );
- }
- functiontransMore(points,type,callback){
- for(varindex inpoints){
- if(index >50){return;}
- varxyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type +
- "&to=4&x=" + points[index].lng + //這里要循環讀入數組points的lng數據，直到points.length完畢。
- "&y=" + points[index].lat +
- "&callbackcallback=callback";
- //動態創建script標簽
- load_script(xyUrl);
- }
- }
- windowwindow.BMap = window.BMap || {};
- BMap.Convertor = {};
- BMap.Convertor.transMore = transMore;
- })();
原文鏈接：http://www.cnblogs.com/milkmap/archive/2011/09/29/2195780.html
【編輯推薦】
責任編輯：彭凡
來源：
博客園
