调取百度地图，带定位自己位置控件，还有实时路况显示到地图中！还可以精确获取经纬度

最新推荐文章于 2023-09-08 17:05:52 发布

共同成长

最新推荐文章于 2023-09-08 17:05:52 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42489436/article/details/89519803

版权

这是全部的页面，注意替换掉自己引入的文件和自己的AK
直接复制代码看效果去吧！！！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>路况信息</title>
    <link rel="stylesheet" href="/Public/static/css/aui.css">
    <link rel="stylesheet" href="/Public/static/css/ext.css">
    <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
    <script src="/Public/js/jquery-1.8.2.min.js"></script>
    <script src="/Public/static/js/common.js"></script>
   
    <script type="text/javascript" src="/Public/js/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的AK"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
</head>
<body>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn" href="{:U('index')}">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">路况信息</div>
</header> 
<div id="container"></div>
<script type="text/javascript"> 
    //设置内容响应式显示
    $("#container").css("height",$(window).height()-$('.aui-bar-nav').height()+"px");
 window.onload=init;
  function init(){
    var geolocation = new BMap.Geolocation();  
    geolocation.getCurrentPosition(function(r) {  
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {  
            var mk = new BMap.Marker(r.point);
            var myGeo = new BMap.Geocoder();  
            myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat),           
                    function(rs) {  
                        var addComp = rs.point;  //获取当前地理位置信息

                 var map = new BMap.Map("container");
                // 创建地图实例  
                var point = new BMap.Point(addComp.lng, addComp.lat);//取地理位置的经纬度
                // 创建点坐标  
                map.centerAndZoom(point, 17);
                // 初始化地图，设置中心点坐标和地图级别  

                var ctrl = new BMapLib.TrafficControl({
                        showPanel: false //是否显示路况提示面板
                    }); 

                    map.addControl(ctrl);
                    ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); 
                    ctrl.showTraffic();//实时路况设置默认显示

                    //添加红点的位置
                    var marker = new BMap.Marker(point);  // 创建标注
                    map.addOverlay(marker);               // 将标注添加到地图中
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画




                    //添加定位的控件
                    var navigationControl = new BMap.NavigationControl({    
                    // 靠左上角位置
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    // LARGE类型
                    type: BMAP_NAVIGATION_CONTROL_LARGE,
                    // 启用显示定位
                    enableGeolocation: true
                  });
                  map.addControl(navigationControl);
                  // 添加定位控件
                  var geolocationControl = new BMap.GeolocationControl();
                  geolocationControl.addEventListener("locationSuccess", function(e){
                    // 定位成功事件
                    var address = '';
                    address += e.addressComponent.province;
                    address += e.addressComponent.city;
                    address += e.addressComponent.district;
                    address += e.addressComponent.street;
                    address += e.addressComponent.streetNumber;
                    map.centerAndZoom(point, 17);
                    //alert("当前定位地址为：" + address);
                  });
                  geolocationControl.addEventListener("locationError",function(e){
                    // 定位失败事件
                    alert(e.message);
                  });
                  map.addControl(geolocationControl);
                });  

        } else {  
            alert('failed' + this.getStatus());  
        }  
    });
}





</script> 
</body>
</html>