百度地图分布图（百度地图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",);

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司机位置实时定位分布图）的更多相关文章

Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置
通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...
C#的百度地图开发(三)依据坐标获取位置、商圈及周边信息
原文:C#的百度地图开发(三)依据坐标获取位置.商圈及周边信息我们得到了百度坐标,现在依据这一坐标来获取相应的信息.下面是相应的代码 public class BaiduMap { /// < ...
地图调起URI API（通过连接直接调用百度地图）
网站:http://lbsyun.baidu.com/index.php?title=uri/api/web 地图调起URI API 百度地图URI API是为开发者提供直接调起百度地图产品(百度We ...
百度地图和高德地图坐标系的互相转换四种Sandcastle方法生成c#.net帮助类帮助文档文档API生成神器SandCastle使用心得 ASP.NET Core
百度地图和高德地图坐标系的互相转换 GPS.谷歌.百度.高德坐标相互转换一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...
【百度地图API】如何制作商圈地图？行政地图？
原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...
arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
ARCGIS FLEX API加载google地图、百度地图、天地图（转）
http://www.cnblogs.com/chenyuming507950417/ Flex加载google地图.百度地图以及天地图作底图一 Flex加载Google地图作底图 (1)帮助类G ...
JS 百度地图换地图主题颜色（API自带）
JS 百度地图换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...

随机推荐

Unity Pixel 人物设计(1)
草稿: 目前进度:
Anomaly Detection
数据集中的异常数据通常被成为异常点.离群点或孤立点等,典型特征是这些数据的特征或规则与大多数数据不一致,呈现出“异常”的特点,而检测这些数据的方法被称为异常检测. 异常数据根据原始数据集的不同可以分为 ...
monkey和monkeyrunner的区别
简单来说: 1.monkey是在设备或模拟器直接运行adb shell命令生成随机事件来进行测试 2.monkeyrunner是通过API发送特定的命令和事件来控制设备为了支持黑盒自动化测试的场景, ...
LeetCode 62. Unique Paths不同路径 (C++/Java)
题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...
URL、URI、URN之间的区别
URL统一资源定位符 URI统一资源标识符 URN统一资源名称 URL是URI的一个特例. URI由URL和URN两部分组成. 在java类中,URI类不包含任何访问资源的方法,它唯一的作用就是解析. ...
前端Jquery总是提示$符未定义
这些网上给的答案都是Jquery的js文件未成功导入 ! 我的问题是竟然是Spring的service层上面忘记加service注解了 ! 是后端的问题 !
QList去掉重复项 .toSet()报错？？？
我们知道QList::toSet()函数可以将QList转成QSet.可我却遇到报错: QList<QVariant> datas = it.value().values(); QSet& ...
Visual Studio 2015 Tools for Unity使用基础
Unity4.x编辑器侧具体版本号:Visual Studio 2015 Tools for Unity 3.7.0.1 该插件在:Microsoft Visual Studio Tools for ...
集成Azure DevOps Server(TFS) 与微软Teams
1.概述 Microsoft Teams是Office 365中团队协作的中心.将团队的所有聊天.会议.文件和应用程序放在一个位置.软件开发团队可以在一个专门的协作中心中即时访问他们所需的所有内容,T ...
Python连载33-共享变量加锁、释放
一.共享变量共享变量:当多个线程访问同一个变量的时候.会产生共享变量的问题. 例子: import threading sum = 0 loopSum = 1000000 def myAdd(): ...

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

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

随机推荐

热门专题