zoukankan      html  css  js  c++  java
  • 把原始坐标转化为百度坐标(位置更精确)

    <!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 { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Q7hhQzxGQt1Ea0Gg1crZjrSWvtY9eqkR"></script>
    <title>GPS转百度</title>
    </head>
    <body>
    <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
    if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }

    function showPosition(position){

    var lo=position.coords.longitude;
    var la=position.coords.latitude;
    // 百度地图API功能
    //GPS坐标

    var ggPoint = new BMap.Point(lo,la);

    //地图初始化
    var bm = new BMap.Map("allmap");
    bm.centerAndZoom(ggPoint, 15);
    bm.addControl(new BMap.NavigationControl());

    //添加gps marker和label
    /*var markergg = new BMap.Marker(ggPoint);
    bm.addOverlay(markergg); //添加GPS marker
    var labelgg = new BMap.Label("未转换的GPS坐标(错误)",{offset:new BMap.Size(20,-10)});
    markergg.setLabel(labelgg); //添加GPS label*/

    //坐标转换完之后的回调函数
    translateCallback = function (data){
    if(data.status === 0) {
    var marker = new BMap.Marker(data.points[0]);
    bm.addOverlay(marker);
    var label = new BMap.Label("转换后的百度坐标(正确)",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label); //添加百度label
    bm.setCenter(data.points[0]);
    }
    }

    setTimeout(function(){
    var convertor = new BMap.Convertor();
    var pointArr = [];
    pointArr.push(ggPoint);
    convertor.translate(pointArr, 1, 5, translateCallback)
    }, 1000);

    }

    </script>

  • 相关阅读:
    认识岗位-带你一起偷窥产品经理的日常
    SpringBoot单元测试踩坑
    Oracle“ORA-38104: 无法更新ON子句中引用的列”解决方式
    SXSSFWorkbook使用补充
    JAVA复制字符串并用指定字符串拼接
    一个简单for循环的时间复杂度
    SXSSFWorkbook的简单使用
    AOP行为日志
    antV G2 为柱状图添加背景颜色
    AntV G2 图表tooltip重命名
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6781865.html
Copyright © 2011-2022 走看看