GPS坐标单个和批量转为百度地图坐标(WGS84转BD-09)的方法,百度已经提供了相关接口,如下:
http://developer.baidu.com/map/jsdemo/demo/convertor.js 这是单个坐标转换接口
http://developer.baidu.com/map/jsdemo/demo/changeMore.js 这是批量转换接口
下面是上面两个接口的详细代码:
批量转换函数
//2011-7-25 zhangying (function(){ function load_script(xyUrl, callback){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; //借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = function(){ if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){ callback && callback(); // Handle memory leak in IE script.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 ); } function transMore(points,type,callback){ var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&mode=1"; var xs = []; var ys = []; var maxCnt = 20;//每次发送的最大个数 var send = function(){ var url = xyUrl + "&x=" + xs.join(",") + "&y=" + ys.join(",") + "&callback=callback"; //动态创建script标签 load_script(url); xs = []; ys = []; } for(var index in points){ if(index % maxCnt == 0 && index != 0){ send(); } xs.push(points[index].lng); ys.push(points[index].lat); if(index == points.length - 1){ send(); } } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.transMore = transMore; })();单个转换函数
//2011-7-25 (function(){ //闭包 function load_script(xyUrl, callback){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; //借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = function(){ if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){ callback && callback(); // Handle memory leak in IE script.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 ); } function translate(point,type,callback){ var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //随机函数名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; //动态创建script标签 load_script(xyUrl); BMap.Convertor[callbackName] = function(xyResult){ delete BMap.Convertor[callbackName]; //调用完需要删除改函数 var point = new BMap.Point(xyResult.x, xyResult.y); callback && callback(point); } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; })();今天在网页中有一个函数想转换单个的,有一个函数想批量转换,把这两个都引用进项目后,出现了错误,后面分析源代码之后,找出了原因,在于最后三个语句,他们都是相同的,后面一个加入的覆盖了前面一个,所以造成总有一个接口使用不了
因此,我把这两个接口合二为一,把源代码引用到自己的项目中,解决了问题:
二合一之后的源代码
(function(){ //闭包 function load_script(xyUrl, callback){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; //借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = function(){ if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){ callback && callback(); // Handle memory leak in IE script.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 ); } function translate(point,type,callback){//单个转换 var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //随机函数名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; //动态创建script标签 load_script(xyUrl); BMap.Convertor[callbackName] = function(xyResult){ delete BMap.Convertor[callbackName]; //调用完需要删除改函数 var point = new BMap.Point(xyResult.x, xyResult.y); callback && callback(point); }; } function transMore(points,type,callback){//批量转换 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&mode=1"; var xs = []; var ys = []; var maxCnt = 30;//每次发送的最大个数 var send = function(){ var url = xyUrl + "&x=" + xs.join(",") + "&y=" + ys.join(",") + "&callback=callback"; //动态创建script标签 load_script(url); xs = []; ys = []; }; for(var index in points){ if(index % maxCnt == 0 && index != 0){ send(); } xs.push(points[index].lng); ys.push(points[index].lat); if(index == points.length - 1){ send(); } } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; BMap.Convertor.transMore = transMore; })();另外附上两个接口使用的示例源代码
单个转换的接口
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> <title>GPS转百度</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 //GPS坐标 var xx = 116.397428; var yy = 39.90923; var gpsPoint = new BMap.Point(xx,yy); //地图初始化 var bm = new BMap.Map("allmap"); bm.centerAndZoom(gpsPoint, 15); bm.addControl(new BMap.NavigationControl()); //添加谷歌marker和label var markergps = new BMap.Marker(gpsPoint); bm.addOverlay(markergps); //添加GPS标注 var labelgps = new BMap.Label("我是GPS标注哦",{offset:new BMap.Size(20,-10)}); markergps.setLabel(labelgps); //添加GPS标注 //坐标转换完之后的回调函数 translateCallback = function (point){ var marker = new BMap.Marker(point); bm.addOverlay(marker); var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label bm.setCenter(point); alert(point.lng + "," + point.lat); } setTimeout(function(){ BMap.Convertor.translate(gpsPoint,0,translateCallback); //真实经纬度转成百度坐标 }, 2000); </script>批量转换的示例接口
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></script> <title>批量坐标转换</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); var i; var markers = []; map.addEventListener("click",function(e){ alert(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(xyResults){ var xyResult = null; for(var index in xyResults){ xyResult = xyResults[index]; if(xyResult.error != 0){continue;}//出错就直接返回; var point = new BMap.Point(xyResult.x, xyResult.y); var marker = new BMap.Marker(point); map.addOverlay(marker); map.setCenter(point);// 由于写了这句,每一个被设置的点都是中心点的过程 } } setTimeout(function(){ BMap.Convertor.transMore(points,2,callback); //一秒之后开始进行坐标转换。参数2,表示是从GCJ-02坐标到百度坐标。参数0,表示是从GPS到百度坐标 }, 1000); </script>
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!