其他分享
首页 > 其他分享> > 百度地图分布图(百度地图api司机位置实时定位分布图)

百度地图分布图(百度地图api司机位置实时定位分布图)

作者:互联网

就类似于我们使用共享单车app的时候,可以看到我们周围的空闲单车分布。e代驾 在后台管理系统需求里也有此功能,目的是为了实时看到目标城市下的所有司机状态。

一、controller

//controller file

//$drivers 是拿到当前城市所有的司机信息 
foreach($drivers as $driver) {
            
                $driver_phone=$driver['phone'];
                $last_latitude=$driver->position->baidu_lat;
                $last_longitude=$driver->position->baidu_lng;
                $last_phone=$driver['phone'];
                $last_name=$driver['name'];
                $driver_name=$driver['user'];

        
                //极速查勘的司机 空闲-蓝 2 忙碌-紫 4  
                $_iStatusJiSuChaKan = $this->getDriverStatusJiSuChaKan($driver['user'],$_iStatus);

                if(!empty($_iStatusJiSuChaKan)){
                    $_iStatus = $_iStatusJiSuChaKan;
                }
                   $addPoint.=sprintf('marker = addDriver(%s, %s, "%s",%s);'."\n", $last_latitude, $last_longitude, $driver_name, $_iStatus);
               }
        
                $data['list']=$addPoint;
                   //然后把$data丢给view
//print_r($data);
Array
(
    [city] => 北京
    [addPoint] => marker = addDriver(32.059339, 118.787148, "BJ9010",0);
marker = addDriver(40.018634, 116.479259, "BJ9017",0);
marker = addDriver(39.855547, 116.504390, "BJ5780",0);
marker = addDriver(40.019712, 116.472373, "BJ6162",0);
marker = addDriver(39.898936, 116.518997, "BJ6792",0);
marker = addDriver(39.876989, 116.481366, "BJ9031",1);
marker = addDriver(39.951750, 116.520674, "BJ6900",0);
marker = addDriver(39.852491, 116.281912, "BJ7063",0);
marker = addDriver(39.981293, 116.522406, "BJ7185",0);
marker = addDriver(39.986936, 116.322063, "BJ7516",0);
)

二、view

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/map.js"></script>
<title>司机位置实时分布图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ECfffb5..........." ></script>  //这里是申请的appkey
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<style type="text/css">
body, html,#map_canvas {width: 100%;height: 100%;overflow: hidden;margin:0;}
.container-fluid {padding:0px;}
.shoppingcart{position:absolute;top:10px;width:203px;color:#000;height:28px;right:0px;font-weight:bold;font-size:15px;}
.cart_open {padding:0 5px;right:200px;margin-bottom:5px;}
.cart_open dl {margin:0;padding:0;height:30px;padding-left:8px;clear:both}
.cart_open dd {float:left;padding-top:5px;padding-right:0px;line-height:20px;}
.cart_open a {color:red;}
.cart_open dd.name {width:75%;height:20px;display:block;text-align:left;}
.cart_open span {clear:both;line-height:20px;font-size:12px;color:#F00;text-align:center;color:#000;display:block;color:#000}
.flyout-menu {display:none;position:absolute;visibility:hidden;z-index:999999;}
</style>
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
        
<div class="span9">
    <div id="map_canvas"></div>
    <div class="shoppingcart" id="shoppingcart"></div>
</div>
<div class="span3" style="margin-top:20px;">
   
</div>
<div class="span3">
<div style=" float:left;width:23px; height:25px; display: inline ;background:url(/img/us_cursor.gif) no-repeat 0px -21px;"></div>
<div style=" float:left;display: inline ;">空闲</div><div style=" float:left;width:23px; height:25px; display: inline ;background:url(/img/us_cursor.gif) no-repeat -23px -21px;"></div>
<div style=" float:left;display: inline ;">工作</div><div style=" float:left;width:23px; height:25px; display: inline ;background:url(/img/us_cursor.gif) no-repeat -46px -21px;"></div>
<div style=" float:left;display: inline ;">极速查勘(空闲)</div><div style=" float:left;width:23px; height:25px; display: inline ;background:url(/img/us_cursor.gif) no-repeat -69px -21px;"></div>
<div style=" float:left;display: inline ;">代保养</div><div style=" float:left;width:23px; height:25px; display: inline ;background:url(/img/us_cursor.gif) no-repeat -92px -21px;"></div>
<div style=" float:left;display: inline ;">极速查勘(工作)</div></div>
<div class="span3">
    <label class="alert alert-info">当前城市:北京</label> 
<form class="navbar-form pull-left span12" id="driver-map-form" action="r=driver/map" method="post">        <label>司机工号:</label>
        <input type="text" name="driver_id" id="driver_id" value="" class="span11" autocompl
ete="off">
    <label>地图查询地址:</label>
    <input type="text" name="address" id="address" value="北京" class="span11" autocomplete="off">
    <label>服务类型:</label>
    <select name="service_type" id="service_type">
<option value="">全部</option>
<option value="00000000000000000000000000000001">代驾</option>
<option value="00000000000000000000000000000010">车后-代洗车</option>
<option value="00000000000000000000000000000100">车后-代保养</option>
<option value="00000000000000000000000000001001">平安-急速查勘</option>
<option value="00000000000000000000000000010001">平安-坐享式理赔</option>
<option value="00000000000000000000000000100000">车后-充电英雄</option>
<option value="00000000000000000000000001000000">车后-代验车</option>
<option value="00000000000000000000000010000000">女司机</option>
<option value="00000000000000000000010000000000">专职女司机</option>
<option value="00000000000000000000000100000000">货车司机</option>
<option value="00000000000000000000001000000000">金牌接驾司机</option>
</select>    <button type="submit" class="btn">查询</button>
    </form>      
        </div>
</div>

<script type="text/javascript">
var markers = [];

function addMarkers(){
    bds = map.getBounds();
    for(i=0;i<markers.length;i++){
        var result = BMapLib.GeoUtils.isPointInRect(markers[i].getPosition(), bds);
        if(result == true)
            map.addOverlay(markers[i]);
        else
            map.removeOverlay(markers[i]);
    }
}

function addDriver(latitude, longitude, driver_id, status, $message){
    var marker;
    var point = new BMap.Point(longitude, latitude);
    var myIcon = new BMap.Icon("/img/us_cursor.gif", new BMap.Size(23, 25), {
        offset: new BMap.Size(10, 25),
        imageOffset: new BMap.Size(0-status*23,-21)
    });

        var marker = new BMap.Marker(point, {icon: myIcon});
        message = '';
        var opts = {title : '<span style="font-size:16px;color:#0A8021">' + driver_id + '</span>'};
        var infoWindow = new BMap.InfoWindow('', opts);  // 创建信息窗口对象

        //map.addOverlay(marker);
        marker.addEventListener("click", function(){

        //这里是或许司机最新状态
            $.ajax({
                url: "index.php",
                data: {r:'client/ajax',method:'driver_get', driver_id:driver_id},
                success: function(data){
                    infoWindow.setTitle('<span style="font-size:16px;color:#0A8021">' + data.driverInfo.name+ ' ' + driver_id + '</span>');
                    switch(data.driverInfo.state){
                        case "0":
                            infoWindow.setContent($message);
                              break;
                          case "1":
                              infoWindow.setContent(data.driverInfo.name + '工作中');
                              break;
                          case "2":
                              infoWindow.setContent(data.driverInfo.name + '已下班');
                              break;
                    }
                },
                dataType: "json"
            });
            this.openInfoWindow(infoWindow);
        });
        markers.push(marker);
}


//这里是从后端读取的数据,获取当前城市的司机坐标和工号
marker = addDriver(32.059339, 118.787148, "BJ9010",0);
marker = addDriver(40.018634, 116.479259, "BJ9017",0);
marker = addDriver(39.855547, 116.504390, "BJ5780",0);
marker = addDriver(40.019712, 116.472373, "BJ6162",0);
marker = addDriver(39.898936, 116.518997, "BJ6792",0);
marker = addDriver(39.876989, 116.481366, "BJ9031",1);
marker = addDriver(39.951750, 116.520674, "BJ6900",0);
marker = addDriver(39.852491, 116.281912, "BJ7063",0);
marker = addDriver(39.981293, 116.522406, "BJ7185",0);
marker = addDriver(39.986936, 116.322063, "BJ7516",0);

var all_count = 0;
var all_longtitude = 0;
var all_latitude = 0;

var options = {
  onSearchComplete: function(results){
    // 判断状态是否正确
    var i = 0;
    if(local.getStatus() == BMAP_STATUS_SUCCESS){
        for(i = 0; i < results.getCurrentNumPois(); i++){
            all_count++;
            all_longtitude += results.getPoi(i).point.lng;
            all_latitude += results.getPoi(i).point.lat;

            addPointWithPic(results.getPoi(i).point.lat, results.getPoi(i).point.lng,results.getPoi(i).title+":"+results.getPoi(i).address, 4);
        }
    }

    if(all_count>0){
        var point = new BMap.Point(all_longtitude/all_count,all_latitude/all_count);
        map.centerAndZoom(point, 12);
    }else{
        var point = new BMap.Point(116.39633672727,39.922375818182);
        map.centerAndZoom(point, 5);
    }

    address = $('input#address').prop("defaultValue");
    $('input#address').val(address);
  }
};

var map = new BMap.Map("map_canvas");
var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
map.addControl(new BMap.NavigationControl(opts));

map.enableScrollWheelZoom();
map.addEventListener("tilesloaded", addMarkers);
map.addEventListener("zoomend", addMarkers);
map.addEventListener("moveend", addMarkers);

var ac = new BMap.Autocomplete(
    {"input" : "address",
     "location" : "北京"
});




var local = new BMap.LocalSearch("北京", options);
console.log(local);
local.search("北京");

//定时刷新
$().ready(function(){
    if (self == top) {
        setInterval(function(){location.href = 'r=driver/map'}, 300000);
    }
})
</script>
        </div>
    </div>
</body>
</html>

三、js

function addClient(latitude, longitude){
    var point = new BMap.Point(longitude, latitude);
    var myIcon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", new BMap.Size(22, 21), {
        offset: new BMap.Size(22, 21),
        imageOffset: new BMap.Size(0, 0) 
    });
    

    translateCallback = function (point){
        var marker = new BMap.Marker(point, {icon:myIcon});
        map.addOverlay(marker);
    }    

    BMap.Convertor.translate(point,2,translateCallback);    
}


function addPoint(latitude, longitude, message, title){
    var marker;
    var point = new BMap.Point(longitude, latitude);

    translateCallback = function (point){
        marker = new BMap.Marker(point);
        var opts = {title : '<span style="font-size:14px;color:#0A8021">' + title + '</span>'};
        var infoWindow = new BMap.InfoWindow(message, opts);  // 创建信息窗口对象

        map.addOverlay(marker);
        marker.addEventListener("click", function(){          
           this.openInfoWindow(infoWindow);  
        });
    }    

    BMap.Convertor.translate(point,2,translateCallback);    
}

function addPointWithPic(latitude, longitude, message, index){
    var point = new BMap.Point(longitude, latitude);
    var myIcon = new BMap.Icon("../img/us_cursor.gif", new BMap.Size(23, 21), {
        offset: new BMap.Size(10, 21),
        imageOffset: new BMap.Size(0 - index * 23,0) 
    });
    
    var marker = new BMap.Marker(point, {icon:myIcon});
    var opts = {};
    
    var infoWindow = new BMap.InfoWindow(message, opts);  // 创建信息窗口对象
    
    map.addOverlay(marker);
    
    marker.addEventListener("click", function(){          
        this.openInfoWindow(infoWindow);  
    });
}

function addPointIndex(latitude, longitude, index, message){
  var point = new BMap.Point(longitude, latitude);

  var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
    offset: new BMap.Size(10, 25),
    imageOffset: new BMap.Size(0, 0 - index * 25) 
  });
  var marker = new BMap.Marker(point, {icon: myIcon});
  map.addOverlay(marker);

  var opts = {
    /*
    width : 250,     // 信息窗口宽度
    height: 100,     // 信息窗口高度
    title : title // 信息窗口标题
     */
    }

    var infoWindow = new BMap.InfoWindow(message, opts);  // 创建信息窗口对象

    marker.addEventListener("click", function(){          
       this.openInfoWindow(infoWindow);  
    });
}

四、image

五、测试效果图

 六、线上效果(晚上,20:36分)

 

 

标签:addDriver,point,地图,分布图,var,BMap,marker,new,百度
来源: https://blog.51cto.com/u_13481146/2820656