• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > 地图,GIS教程 >  GPS坐标单个和批量转正文

GPS坐标单个和批量转为百度地图坐标(WGS84转BD-09)

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-07-02 09:31
分享到:
GPS转百度坐标

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>

(责任编辑:网页模板)
  • 本文标签:
  • WGS84转BD-09
GPS坐标转换为百度坐标pointtransfertools.js
百度获取经纬度,以及省市区,BMap.Geolocation()