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

随机推荐

版本管理·玩转git(推到远程仓库)
经过前面的练习,你在本地的仓库里管理代码已经比较熟练了,但如果是团队开发呢,如何配合起来呢? 我们可以把版本仓库放在互联网上,开发者把自己最新的版本推到线上仓库,同时,把线上仓库的最新代码拉到自己本地 ...
[b0022] python 归纳 (八)_多进程_基本使用
# -*- coding: UTF-8 -*- """ 测试进程使用 multiprocessing.Process 使用: 1. 准备一个函数<fun>,子 ...
[Linux] 纯净ubuntu系统仓库更换为阿里云的源
1.先apt-get update一下当前默认的源,更新完成后先把vim命令安装一下,再修改源仓库为阿里云,否则无法直接编辑文件 2.先添加阿里云的源,编辑文件/etc/apt/sources.lis ...
jsp页面格式化时间 fmt:formatDate格式化日期
使用fmt函数需在jsp中引入 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" ...
CodeForces - 1256C （思维+贪心）
题意 https://vjudge.net/problem/CodeForces-1256C 有一条宽度为n的河.河的左岸编号为0,右岸编号为n+1.河流上还有m个木制平台,第i个平台的长度为ci(所 ...
CodeForces - 1250B The Feast and the Bus （贪心+暴力）
题意 https://vjudge.net/problem/CodeForces-1250B 每个人属于队伍ai,汽车一次至多载两只队伍(全员),费用为车的容量*载人次数,问最少花费. 思路 k(队伍 ...
联邦学习（Federated Learning）
联邦学习简介联邦学习(Federated Learning)是一种新兴的人工智能基础技术,在 2016 年由谷歌最先提出,原本用于解决安卓手机终端用户在本地更新模型的问题,其设计目标是 ...
elementui-如何同时获取多选框的label和value
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- impor ...
【hdu3311】Dig The Wells（斯坦纳树+dp）
传送门题意: 给出\(n\)个重要点,还有其余\(m\)个点,\(p\)条边. 现在要在这\(n+m\)个点中挖几口水井,每个地方的费用为\(w_i\).连接边也有费用. 问使得这\(n\)个地点都 ...
Jmeter Question 之“集成Ant+Jenkins自动化”
首先介绍一下Ant.Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.由Apache软件基金会所提供. 是的.还是Apache家 ...

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

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

随机推荐

热门专题