百度地图应用-gps如何精准地转换成百度定位图标

最新推荐文章于 2023-04-15 11:16:15 发布

yinxiaoxin001

最新推荐文章于 2023-04-15 11:16:15 发布

阅读量539

点赞数

分类专栏：前端文章标签：百度地图

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

出现的问题：html5获取gps数据有延迟，必须在回调函数中才能获取经纬度，所以把转换逻辑都放到回调中了。

<!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=e6t46sH8uiGNSQpLRh4Emy1evqKS6W1q"></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">
    var xx,yy,gpsPoint;
    navigator.geolocation.getCurrentPosition(function (position) {

        var xx = position.coords.longitude;
       var  yy = position.coords.latitude;
        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>