北京效果好的网站推广站长工具站长之家官网
车辆选择解决方案
/*
* @Purpose: 添加车辆选择的功能 -> 用户在选择不同的车辆时，重新初始化系统状态，清除之前的定时器，并根据新选择的车辆设置新的定时器，以实现对新车辆状态的实时加载。
* @File Name: 车辆选择解决方案
* @Author: Caroline
* @Modifications: 2023/12/05
*/
home.php
添加页面车辆选择控件
<table class="table"><label for="vehicle_opt" class="vehicle_option">车辆选择</label><select id="vehicle_opt" class="vehicle_option"><option value="obu_01" class="content-value">obu_01</option><option value="obu_02" class="content-value">obu_02</option><option value="obu_03" class="content-value">obu_03</option><option value="obu_04" class="content-value">obu_04</option><option value="obu_05" class="content-value">obu_05</option><option value="obu_06" class="content-value">obu_06</option><option value="obu_07" class="content-value">obu_07</option><option value="obu_08" class="content-value">obu_08</option><option value="obu_09" class="content-value">obu_09</option></select>
</table>
Pages_model.php
修改原本的$obu_id值为我们自己获取的obu_id值$obu_id_val，并POST到后端服务器。
public function get_index_data($obu_id_val,$application_id){$data = array();// 获取百度地图 JavaScript API 的 URL$data['baidu_map_js_url'] = "http://api.map.baidu.com/api?v=3.0&ak={$this->get_baidu_app_key()}";$obu_id_val = $this->POST_DATA("obu_id");if(empty($obu_id_val)){$obu_id_val = common_get_default_obu_id();}// 将获取到的 obu_id 存储在返回的数据数组中$data['obu_id'] = $obu_id_val;if(empty($application_id)){$application_id = common_get_default_app_id(); }$data['application_id'] =$application_id; return $data;}
bd_vehicle.js
1. systemLoadStatus()函数解析
这个函数主要用于系统加载状态，包括获取车辆坐标数据并在地图上绘制轨迹。
function systemLoadStatus() {// 检查系统是否已准备就绪if (systemReady) {// 如果systemReady为true，表示系统已经准备好，清空#systemReadStatus元素的html内容$('#systemReadStatus').html("");// 清除systemReadStatusInterval定时器clearInterval(systemReadStatusInterval);// 结束函数的执行return;} else {// 系统没有准备就绪// 首次启动，加载近期全部坐标，在加载成功后，绘制线路$('#systemReadStatus').html("Loading.");$.post(app_ctl + '/orbit', {option: 0,application_id: application_id_val,obu_id: obu_id_val,demo_flag: demo}, function (data, status) {//console.log(status == "success",data,data['request'] == "success");if (status == "success" && data && data.request == "success") {// 将 systemReady 设置为 true，表示系统已准备好。systemReady = true;console.log(data.msg);......}});}
}
2. loadVehicleStatus()函数解析
这个函数主要用于获取车辆状态数据，更新页面上的相关信息，包括显示车辆编号、更新车辆状态列表以及在地图上绘制轨迹等。
function loadVehicleStatus() {// 画图和访问过程，不要重复访问// 检查地理信息和状态更新标志// 如果 geoUpdateFlag 为 false 或 statueUpdateFlag 为 true，则输出相关标志的值到控制台，并结束函数执行。if (!geoUpdateFlag || statueUpdateFlag) {console.log({"geoUpdateFlag": geoUpdateFlag,"statueUpdateFlag": statueUpdateFlag});return;}// 访问// 设置状态更新标志，设置为true，表示开始状态更新statueUpdateFlag = true;// post请求获取车辆状态$.post(app_ctl + '/status', {option: 0,application_id: application_id_val,obu_id: obu_id_val,demo_flag: demo}, function (data, status) {// 处理ajax请求的回调if (status == "success" && data && data.request == "success") {......} else {console.log("car-status error!", data);}//完成访问，重置状态更新标志statueUpdateFlag = false;});
}
3. 监听选择框的改变事件
$('select').on('change', function() {// 从选择框中获取当前选中的车辆valueobu_id_val = $(this).children('option:selected').val();console.log("车辆选择: " + obu_id_val);// 清除之前设置的systemReadStatusInterval和status_interval定时器clearInterval(systemReadStatusInterval);clearInterval(status_interval);// 重置系统状态标记，重置系统的准备状态、地理位置更新标记以及状态更新标记，为重新加载数据做准备systemReady = false;geoUpdateFlag = false; //首次更新标记statueUpdateFlag = false;// 重新设置定时器//加载地图、坐标、轨迹systemReadStatusInterval = setInterval(systemLoadStatus, 1000);//加载车辆实时状态 status_interval = setInterval(loadVehicleStatus, 2000);
});
4. 遇到的问题
清除之前的定时器之后，没有初始化系统状态的标记systemReady，导致重新启动定时器之后orbit没有重新加载，所以清除定时器之后要重置系统状态标记，重置系统的准备状态、地理位置更新标记以及状态更新标记，为重新加载数据做准备。
systemReady = false;
geoUpdateFlag = false; //首次更新标记
statueUpdateFlag = false;