百度坐标转换

两种方式转换坐标，我使用微信获取的GPS坐标，直接放在百度地图中使用，发现标点的时候会与实际有较大的偏移。

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="expires" content="0" />
<title>百度地图坐标变换</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FCGqW9Y44cb9lHiQsYRGzTsD"></script>
<!-- 方式一坐标变换需要引入的文件 -->
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript" src="./jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="./index.js"></script>
<style type="text/css">
*{ margin:0px; padding: 0px;}
html{width: 100%;height: 100%;}
body{
    font-family: -apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    padding:20px 15px 15px 15px; 
    font-size:12px;
    color:#3e3e3e;
    margin:0px auto;
    width: 100%;height: 100%;
}
.bmapCls{width: 100%;height:100%;border:1px red solid;}
</style>
</head>
<body>
    <div id="bmapId" class="bmapCls"></div>
</body>
</html>

 

index.js

var lng = 106.487744;
var lat = 29.569733;
var map;
$(function(){
    
    map = new BMap.Map("bmapId");          // 创建地图实例  
    var gpsPoint = new BMap.Point(lng, lat);  // 创建点坐标  
    console.log("gpsPoint:"+gpsPoint.lng+","+gpsPoint.lat);
    map.centerAndZoom(gpsPoint, 15);                 // 初始化地图，设置中心点坐标和地图级别 
    
    var markergps = new BMap.Marker(gpsPoint);
    var labelgps = new BMap.Label("我是GPS标注哦",{offset:new BMap.Size(20,-10)});
    markergps.setLabel(labelgps); //添加GPS标注
    map.addOverlay(markergps);
    
    
    //坐标转换完之后的回调函数
    translateCallback = function (point){
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); //添加百度label
        map.setCenter(point);
        console.log("转化为百度坐标为："+point.lng + "," + point.lat);
    }
    // 方式一坐标变换
    BMap.Convertor.translate(gpsPoint,0,translateCallback);
    // 方式二坐标变换
    loadPosition();
    // 结论：两种变换结果相同，每次都有很小的误差，属于正常现象
});


function loadPosition(){
      // locateAddress 通过GPS的经纬度信息，得到对应的位置
      $.ajax({
          'url': 'http://api.map.baidu.com/geoconv/v1/?coords='+lng+','+lat+'&ak=FCGqW9Y44cb9lHiQsYRGzTsD&from=1&to=5&output=json&callback=renderReverse',
          'type':'POST',
          'dataType':'JSONP',
          'jsonp':'jsoncallback', // 自动生成回调函数时的名称
          'error':function(e){
              // 不处理
          },
          'success':function(data){
            // 不处理，由下面的回掉函数处理
          }
      });
}
function renderReverse(data){
    console.log(data.result[0].x+','+data.result[0].y);
    var point = new BMap.Point(data.result[0].x,data.result[0].y);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    var label = new BMap.Label("我是百度2标注哦",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label); //添加百度label
    map.setCenter(point);
    console.log("转化为百度坐标为："+point.lng + "," + point.lat);
}

 

posted @ 2016-06-27 14:48  理舞  阅读(1414)  评论(0)  编辑  收藏  举报