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

marker = addDriver(40.018634, 116.479259, "BJ9017",);

marker = addDriver(39.855547, 116.504390, "BJ5780",);

marker = addDriver(40.019712, 116.472373, "BJ6162",);

marker = addDriver(39.898936, 116.518997, "BJ6792",);

marker = addDriver(39.876989, 116.481366, "BJ9031",);

marker = addDriver(39.951750, 116.520674, "BJ6900",);

marker = addDriver(39.852491, 116.281912, "BJ7063",);

marker = addDriver(39.981293, 116.522406, "BJ7185",);

marker = addDriver(39.986936, 116.322063, "BJ7516",);

)

二、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: %;height: %;overflow: hidden;margin:;}

.container-fluid {padding:0px;}

.shoppingcart{position:absolute;top:10px;width:203px;color:#;height:28px;right:0px;font-weight:bold;font-size:15px;}

.cart_open {padding: 5px;right:200px;margin-bottom:5px;}

.cart_open dl {margin:;padding:;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:%;height:20px;display:block;text-align:left;}

.cart_open span {clear:both;line-height:20px;font-size:12px;color:#F00;text-align:center;color:#;display:block;color:#}

.flyout-menu {display:none;position:absolute;visibility:hidden;z-index:;}

</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="">代驾</option>

<option value="">车后-代洗车</option>

<option value="">车后-代保养</option>

<option value="">平安-急速查勘</option>

<option value="">平安-坐享式理赔</option>

<option value="">车后-充电英雄</option>

<option value="">车后-代验车</option>

<option value="">女司机</option>

<option value="">专职女司机</option>

<option value="">货车司机</option>

<option value="">金牌接驾司机</option>

</select>    <button type="submit" class="btn">查询</button>

    </form>

        </div>

</div>

<script type="text/javascript">

var markers = [];

function addMarkers(){

    bds = map.getBounds();

    for(i=;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(, ), {

        offset: new BMap.Size(, ),

        imageOffset: new BMap.Size(-status*,-)

    });

        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 "":

                            infoWindow.setContent($message);

                              break;

                          case "":

                              infoWindow.setContent(data.driverInfo.name + '工作中');

                              break;

                          case "":

                              infoWindow.setContent(data.driverInfo.name + '已下班');

                              break;

                    }

                },

                dataType: "json"

            });

            this.openInfoWindow(infoWindow);

        });

        markers.push(marker);

}

//这里是从后端读取的数据，获取当前城市的司机坐标和工号

marker = addDriver(32.059339, 118.787148, "BJ9010",);

marker = addDriver(40.018634, 116.479259, "BJ9017",);

marker = addDriver(39.855547, 116.504390, "BJ5780",);

marker = addDriver(40.019712, 116.472373, "BJ6162",);

marker = addDriver(39.898936, 116.518997, "BJ6792",);

marker = addDriver(39.876989, 116.481366, "BJ9031",);

marker = addDriver(39.951750, 116.520674, "BJ6900",);

marker = addDriver(39.852491, 116.281912, "BJ7063",);

marker = addDriver(39.981293, 116.522406, "BJ7185",);

marker = addDriver(39.986936, 116.322063, "BJ7516",);

var all_count = ;

var all_longtitude = ;

var all_latitude = ;

var options = {

  onSearchComplete: function(results){

    // 判断状态是否正确

    var i = ;

    if(local.getStatus() == BMAP_STATUS_SUCCESS){

        for(i = ; 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, );

        }

    }

    if(all_count>){

        var point = new BMap.Point(all_longtitude/all_count,all_latitude/all_count);

        map.centerAndZoom(point, );

    }else{

        var point = new BMap.Point(116.39633672727,39.922375818182);

        map.centerAndZoom(point, );

    }

    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(, )};

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'}, );

    }

})

</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(, ), {

        offset: new BMap.Size(, ),

        imageOffset: new BMap.Size(, )

    });

    translateCallback = function (point){

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

        map.addOverlay(marker);

    }    

    BMap.Convertor.translate(point,,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,,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(, ), {

        offset: new BMap.Size(, ),

        imageOffset: new BMap.Size( - index * ,)

    });

    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(, ), {

    offset: new BMap.Size(, ),

    imageOffset: new BMap.Size(,  - index * )

  });

  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分）

百度地图分布图（百度地图api司机位置实时定位分布图）的更多相关文章

  1. Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置

    通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...

  2. Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

    原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...

  3. C#的百度地图开发(三)依据坐标获取位置、商圈及周边信息

    原文:C#的百度地图开发(三)依据坐标获取位置.商圈及周边信息 我们得到了百度坐标,现在依据这一坐标来获取相应的信息.下面是相应的代码 public class BaiduMap { /// < ...

  4. 地图调起URI API（通过连接直接调用百度地图）

    网站:http://lbsyun.baidu.com/index.php?title=uri/api/web 地图调起URI API 百度地图URI API是为开发者提供直接调起百度地图产品(百度We ...

  5. 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core

    百度地图和高德地图坐标系的互相转换   GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...

  6. 【百度地图API】如何制作商圈地图？行政地图？

    原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...

  7. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. ARCGIS FLEX API加载google地图、百度地图、天地图（转）

    http://www.cnblogs.com/chenyuming507950417/ Flex加载google地图.百度地图以及天地图作底图 一  Flex加载Google地图作底图 (1)帮助类G ...

  9. JS 百度地图 换地图主题颜色（API自带）

    JS 百度地图 换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...

随机推荐

  1. SpringMVC入门 -- 参数绑定

    一.REST与RESTful 1.简介 (1)REST(Representational State Transfer):表现层状态转移,一种软件架构风格,不是标准.REST描述的是在网络中clien ...

  2. Python3在使用requests提示警告InsecureRequestWarning

    解决方法:

  3. GDAL读取Shp问题解决：Unable to open EPSG support file gcs.csv

    在GIS软件的开发中,经常用到开源库GDAL读取Shp数据,当shp数据中包含投影信息时,可能会遇到“Unable to open EPSG support file gcs.csv”错误提示,该错误 ...

  4. SAP HUMO VLMOVE不支持E库存发货到成本中心

    SAP HUMO VLMOVE不支持E库存发货到成本中心 如下HU 194810300235,里面物料的库存是E库存, 执行VLMOVE,试图将该HU整托发货到成本中心, 输入成本中心后,点击按钮'P ...

  5. Window常用且通用快捷键

    Ctrl系列: Ctrl +z :回撤,后退 Ctrl +a :全选 Alt系列: Alt+Tab :切换窗口 Window系列 Window+R:打开“运行”窗口 Window+D:显示桌面 其中常 ...

  6. linux基础学习（二）ls命令以及文件访问权限例（-rw-r-r--）

    ls命令 |命令选项|作用| |:-----:|:----:| |ll| 显示文件得详细信息| |ls -a |显示文件和隐藏文件| |ls -t|以文件和目录的更改时间排序| |ls -m|用&qu ...

  7. 大话IdentityServer4之使用 IdentityServer4 保护 ASP.NET Core 应用

    这几天一直在研究IdentityServer4在asp.net core3.0中的应用,下面说说我的理解: 我们每一个.net core 项目大家可以理解为我新建了一个动物园或者植物园等,注册用户想要 ...

  8. Shell命令-用户用户组管理之userdel、groupadd

    文件及内容处理 - userdel.groupadd 1. userdel:删除用户 userdel命令的功能说明 userdel 命令用于删除用户帐号.userdel 可删除用户帐号与相关的文件.若 ...

  9. 4. Go语言—值类型和引用类型

    一.值类型 1. 定义 ​ 变量直接存储的值,内存通常在栈中分配: var i = 5 -> i-->5 2. 应用 int.float.bool.string.数组.struct 二.引 ...

  10. vue高频面试题（面试路上踩过的坑）

    ### Vue 双向绑定原理 mvvm 双向绑定,采用**数据劫持结合发布者-订阅者模式**的方式,通过 `Object.defineProperty()` 来劫持各个属性的 setter.gette ...