就类似于我们使用共享单车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. sqlserver 问题来了，视图不会自动更新，如果是用*创建的

    奇葩问题一个 create view时候用的select * 关联了几个表创建的. 后修改select *  的表,结果悲剧了. select * from 视图得到的结果绝对让你想哭.不报错,不提示 ...

  2. verdaccio启动命令

    1.启动项目 根目录下 verdaccio 2.npm 源管理 nrm 下载 3.nrm 源列表 nrm ls 4.nrm 源增加 nrm add verdaccio http://localhost ...

  3. Typescript基础(3)——类

    前言 今天继续typescript的学习,开始ts类的学习. 类 类的实现 在ES6中新增了类的概念.我们先看ES6中类的实现. class Person { constructor(name,age ...

  4. overflow-x:scroll失效问题解决

    在移动设备上设置overflow-x:scroll,大部分机型都是展示正常的,在安卓哦5.0系统上,无论怎么样滚动条都不会生效,终于找到了解决办法: display: -webkit-box; // ...

  5. [转]Spring Cloud在国内中小型公司能用起来吗？

    原文地址:http://www.cnblogs.com/ityouknow/p/7508306.html 原文地址:https://www.zhihu.com/question/61403505 今天 ...

  6. Angular 学习笔记（四）

    作用域和控制器的交互情况: 1.控制器通过作用域对模板暴露一些方法供其调用 2.控制器中定义的一些方法可改变注册在作用域下的数据模型 3.控制器在某些场合可能需设置监听器来监听作用域中的数据模型:这些 ...

  7. 码云 git 常用命令

    git 常用命令: git init 创建一个本地文件 ①git add . 当前文件夹下的所有内容 添加到暂存区 git add test.txt 指定文件夹添加 可以添压缩文件 ②git comm ...

  8. mysql操作数据表

    目录 创建数据表 列约束 查看数据表结构 列类型(字段类型) 整型 浮点型 字符串 时间日期类型 Date Time Datetime Timestamp Year 枚举enum 修改表名 增加字段 ...

  9. asp.net core全局异常过滤并监控系统BUG将异常信息记录到日志

    添加: using Dw.Util.Helper; using Microsoft.AspNetCore.Mvc.Filters; using System; using System.Collect ...

  10. 洛谷P2260 [清华集训2012]模积和（容斥+数论分块）

    题意 https://www.luogu.com.cn/problem/P2260 思路 具体思路见下图: 注意这个模数不是质数,不能用快速幂来求逆元,要用扩展gcd. 代码 #include< ...