百度地圖分佈圖（百度地圖api司機位置實時定位分佈圖）

時間  2019-12-10
標籤 百度 地圖 分佈圖 api 司機 位置 實時 定位 欄目 系統網絡 简体版
原文   原文鏈接

就相似於咱們使用共享單車app的時候，能夠看到咱們周圍的空閒單車分佈。e代駕在後臺管理系統需求裏也有此功能，目的是爲了實時看到目標城市下的全部司機狀態。javascript

1、controllerphp

//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",0); marker = addDriver(40.018634, 116.479259, "BJ9017",0); marker = addDriver(39.855547, 116.504390, "BJ5780",0); marker = addDriver(40.019712, 116.472373, "BJ6162",0); marker = addDriver(39.898936, 116.518997, "BJ6792",0); marker = addDriver(39.876989, 116.481366, "BJ9031",1); marker = addDriver(39.951750, 116.520674, "BJ6900",0); marker = addDriver(39.852491, 116.281912, "BJ7063",0); marker = addDriver(39.981293, 116.522406, "BJ7185",0); marker = addDriver(39.986936, 116.322063, "BJ7516",0); )

2、viewcss

<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: 100%;height: 100%;overflow: hidden;margin:0;} .container-fluid {padding:0px;} .shoppingcart{position:absolute;top:10px;width:203px;color:#000;height:28px;right:0px;font-weight:bold;font-size:15px;} .cart_open {padding:0 5px;right:200px;margin-bottom:5px;} .cart_open dl {margin:0;padding:0;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:75%;height:20px;display:block;text-align:left;} .cart_open span {clear:both;line-height:20px;font-size:12px;color:#F00;text-align:center;color:#000;display:block;color:#000} .flyout-menu {display:none;position:absolute;visibility:hidden;z-index:999999;} </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="00000000000000000000000000000001">代駕</option>
<option value="00000000000000000000000000000010">車後-代洗車</option>
<option value="00000000000000000000000000000100">車後-代保養</option>
<option value="00000000000000000000000000001001">平安-急速查勘</option>
<option value="00000000000000000000000000010001">平安-坐享式理賠</option>
<option value="00000000000000000000000000100000">車後-充電英雄</option>
<option value="00000000000000000000000001000000">車後-代驗車</option>
<option value="00000000000000000000000010000000">女司機</option>
<option value="00000000000000000000010000000000">專職女司機</option>
<option value="00000000000000000000000100000000">貨車司機</option>
<option value="00000000000000000000001000000000">金牌接駕司機</option>
</select>    <button type="submit" class="btn">查詢</button>
    </form>      
        </div>
</div>

<script type="text/javascript">
var markers = []; function addMarkers(){ bds = map.getBounds(); for(i=0;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(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0-status*23,-21) }); 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 "0": infoWindow.setContent($message); break; case "1": infoWindow.setContent(data.driverInfo.name + '工做中'); break; case "2": infoWindow.setContent(data.driverInfo.name + '已下班'); break; } }, dataType: "json" }); this.openInfoWindow(infoWindow); }); markers.push(marker); } //這裏是從後端讀取的數據，獲取當前城市的司機座標和工號
marker = addDriver(32.059339, 118.787148, "BJ9010",0); marker = addDriver(40.018634, 116.479259, "BJ9017",0); marker = addDriver(39.855547, 116.504390, "BJ5780",0); marker = addDriver(40.019712, 116.472373, "BJ6162",0); marker = addDriver(39.898936, 116.518997, "BJ6792",0); marker = addDriver(39.876989, 116.481366, "BJ9031",1); marker = addDriver(39.951750, 116.520674, "BJ6900",0); marker = addDriver(39.852491, 116.281912, "BJ7063",0); marker = addDriver(39.981293, 116.522406, "BJ7185",0); marker = addDriver(39.986936, 116.322063, "BJ7516",0); var all_count = 0; var all_longtitude = 0; var all_latitude = 0; var options = { onSearchComplete: function(results){ // 判斷狀態是否正確
    var i = 0; if(local.getStatus() == BMAP_STATUS_SUCCESS){ for(i = 0; 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, 4); } } if(all_count>0){ var point = new BMap.Point(all_longtitude/all_count,all_latitude/all_count); map.centerAndZoom(point, 12); }else{ var point = new BMap.Point(116.39633672727,39.922375818182); map.centerAndZoom(point, 5); } 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(10, 10)}; 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'}, 300000); } }) </script>
        </div>
    </div>
</body>
</html>

 3、jshtml

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(22, 21), { offset: new BMap.Size(22, 21), imageOffset: new BMap.Size(0, 0) }); translateCallback = function (point){ var marker = new BMap.Marker(point, {icon:myIcon}); map.addOverlay(marker); } BMap.Convertor.translate(point,2,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,2,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(23, 21), { offset: new BMap.Size(10, 21), imageOffset: new BMap.Size(0 - index * 23,0) }); 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(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - index * 25) }); 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); }); }

4、imagejava

5、測試效果圖jquery

 6、線上效果（晚上，20：36分）git

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程