百度地图分布图（百度地图api司机位置实时定位分布图）

其他 2019-05-28 11:54:47 阅读次数: 0

就类似于我们使用共享单车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

五、测试效果图

 

猜你喜欢

转载自www.cnblogs.com/wt645631686/p/10936254.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022