zoukankan      html  css  js  c++  java
  • 百度坐标转换

    两种方式转换坐标,我使用微信获取的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);
    }
  • 相关阅读:
    Kafk为什么这么快
    kafka消息格式演变
    kafka基础命令及api使用
    zookeeper && kafka && kafka manager开机自启动设置
    sqoop进行将Hive 词频统计的结果数据传输到Mysql中
    hive实例的使用
    使用HBase Shell命令
    Hadoop使用实例 词频统计和气象分析
    HDFS 操作命令
    第四次作业 描述HDFS体系结构、工作原理与流程
  • 原文地址:https://www.cnblogs.com/TheoryDance/p/5620155.html
Copyright © 2011-2022 走看看