百度地图分布图（百度地图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 ...

随机推荐

解决iOS地图持续定位耗电问题
地图位置刷新的代理didUpdateLocations会持续调用,手机非常耗电但是在实际开发中,有一些APP确实需要用到持续定位的功能,比如:运动类, 导航类, 天气类等等如何进行持续定位呢?保证 ...
sourceTree3.2.6 跳过注册的方法（最新）
1.下载好之后会有这么一个界面要求你注册或登录.(不管它)将下面的一串串放进我的电脑的地址栏,打开sourcetree的文件夹 %LocalAppData%\Atlassian\SourceTree\ ...
[20190524]sqlplus 与输出&.txt
[20190524]sqlplus 与输出&.txt --//在sqlplus下 &一般作为参数替换,如何要输出&,一般有几种情况.据说这个问题是asktom站点查看最多的问题 ...
Python入门基础学习(列表/元组/字典/集合)
Python基础学习笔记(二) 列表list---[ ](打了激素的数组,可以放入混合类型) list1 = [1,2,'请多指教',0.5] 公共的功能: len(list1) #/获取元素 lis ...
1【西北师大-2108Java】第一次作业成绩汇总
[西北师大-2108Java]第一次作业成绩汇总经过本次作业的练习,了解了Java最基本的知识和Java的发展:了解了Java到底是一门怎样的语言,也知道了学习Java的乐趣,懂得了去选择Java开 ...
day8_类的装饰器和反射
""" 类的装饰器: @property 当类的函数属性声明 @property后, 函数属性不需要加括号即可调用 @staticmethod 当类的函数属性声明 @s ...
GET POST 区分
get传送的数据量较小,不能大于2KB.post传送的数据量较大,一般被默认为不受限制.但理论上,IIS4中最大量为80KB,IIS5中为100KB. get安全性非常低,get设计成传输数据,一般都 ...
LeetCode 676. Implement Magic Dictionary实现一个魔法字典 (C++/Java)
题目: Implement a magic directory with buildDict, and search methods. For the method buildDict, you'll ...
git--配置文件、.gitignore
配置文件 git给我们提供了三种配置文件的方法,一种是项目配置文件,一种是全局配置文件,还有一种是系统配置文件. 在我们第一次使用git commit提交代码的时候,git让我们配置用户名和邮箱全局 ...
Asp.Net Core AsyncLocal 异步上下文
引子阅读以下代码,并尝试分析代码解析在主线程中,线程Id为1,为线程变量赋值变量==d6ff 开启一个新的task,此时线程Id为4,变量==d6ff,并调用Task1 开启一个同步Task3 ...

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

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

随机推荐

热门专题