먼저 내 프로그램의 구조와 구현될 기능을 간략하게 소개하겠습니다. 간단히 말해서 이 프로그램의 주요 기능은 알려진 주소, 경도 및 위도가 있는 특정 지점을 지도에 표시하는 것입니다. 크게 세 부분으로 나누어집니다. 프론트엔드(html+css+js), 백엔드(php), 데이터베이스(mysql) 세 가지 모듈은 각각 다음 기능을 구현합니다.
데이터베이스: 특정 위치의 위도 및 경도 정보를 저장합니다(프로젝트에서 회사의 특정 하드웨어 장치의 위치 표시가 필요하므로 이를 장치 주소라고 부릅니다).
백엔드: 이 백엔드에서 구현되는 기능 주로 sql 문을 통해 데이터베이스의 조건을 충족하는 장치의 주소 정보(위도 및 경도)를 쿼리한 다음 주소 정보를 json 형식으로 출력하므로 ajax를 통해 프런트엔드 페이지를 얻을 수 있습니다.
//后台代码：<?phpsession_start ();//查找数据库header ( "Content-type:text/html;charset=utf-8" );include "conn.php";
mysql_query("set names utf8");//读取旧信息$startTime = date("Y-m-d H:i:s", strtotime('-300 minutes', time()));$UserName = $_SESSION['UserName'];//echo $UserName ;//$UserName = 'wld';$sql = "select * from user_device where UserName='".$UserName."' and UseFlag=1";$result_set = mysql_query($sql);$snstr=0;$longstr=0;$lastr=0;$statusstr=0; while($row=mysql_fetch_array($result_set)){ $sql = "select * from device where SN='".$row['SN']."'"; $res = mysql_query($sql); $result=mysql_fetch_assoc($res); /////////////////////////在线监测/////////////////////
$sql_queryt="SELECT * FROM device_online_list WHERE SN='".$SN."' order by Time desc limit 1"; $result_sett=mysql_query($sql_queryt); $resultt=mysql_fetch_assoc($result_sett); if($result_sett)
{
if(strtotime($startTime)<strtotime($resultt['Time']))
{
$runstr=1;
} else $runstr=0;
}else $runstr=0; ///////////////////////////////////////////////////////
if($snstr){ $snstr=$snstr.'_'; $snstr=$snstr.$row['SN']; $longstr=$longstr.'_'; $longstr=$longstr.$result[Longtitude]; $lastr=$lastr.'_'; $lastr=$lastr.$result[Latitude]; $statusstr=$statusstr.'_'; $statusstr=$statusstr.$runstr;
}else{ $snstr=$row['SN']; $longstr=$result[Longtitude]; $lastr=$result[Latitude]; $statusstr=$runstr;
}
}$resultJson = array("SNstr"=>$snstr, "Long"=>$longstr, "La"=>$lastr,"Status"=>$statusstr);//json格式的数组echo urldecode(json_encode($resultJson));//Json格式输出 */?>로그인 후 복사
Front-end: 프론트엔드의 주요 기능은 Baidu Map API를 호출하여 지도를 표시하고, js(ajax)를 통해 배경에서 얻은 경도 및 위도 정보를 위치 매개변수로 지도 포인트 함수에 채워서 구현하는 것입니다. 지도에 특정 지점을 표시하는 기능(물론 제 코드에서는 백그라운드에서 얻은 정보는 경도와 위도뿐 아니라 지도 프로그램이기 때문에 초점이 주로 경도와 위도에 맞춰져 있기 때문에 경도와 위도는 설명 과정에서 언급되며 기타 정보는 무시됩니다.)
//下面是前端代码：<!DOCTYPE html><html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>设备地图</title>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#dev_map{height:500px;width:100%;}
</style>
<script type="text/javascript" src="jquery-1.12.1.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.3"></script></head><body><p class="dev_map" id="dev_map"></p><!-- <p><button type="button" onclick="theLocation()">设备地图</button></p> --></body></html><script>var map = new BMap.Map("dev_map"); // 创建Map实例map.centerAndZoom(new BMap.Point(114.317, 30.594), 5); // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("武汉"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放var arr_longitude = new Array();var arr_latitude = new Array();var arr_sn = new Array();var arr_status = new Array();var arr_point = new Array();var mapSpots = new Array;var url = "http://image.tupian114.com/20140419/09274112.png";var content;var myIcon = new BMap.Icon(url, new BMap.Size(40,30));var opts = {
width : 180, // 信息窗口宽度
height: 180, // 信息窗口高度
title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};// //获取经纬度
$(function()
{
$.ajax({
url: "mysql.search.handle.php",
type: "GET",
dataType:"json",
async:false,
success:function(data)
{ //alert(data.Long.split("_").length);
for(var i=0;i<data.Long.split("_").length;i++)
{
arr_longitude[i]=data.Long.split("_")[i];
arr_latitude[i] = data.La.split("_")[i];
arr_sn[i] = data.SNstr.split("_")[i];
arr_status[i] = data.Status.split("_")[i];
arr_point[i] = new BMap.Point(arr_longitude[i],arr_latitude[i]); // marker = new BMap.Marker(arr_point[i]);
// map.addOverlay(marker);
}
addSpots(data.Long.split("_").length);
}
});
}); function addSpots(arr_length){
alert("您有"+arr_length+"台设备!"); for(var i=0;i<arr_length;i++)
{
content = "";
content = "<p><span>SN码：" + arr_sn[i] + "</span></br>" + "<span>设备状态：" + translateOnline(arr_status[i]) + "</span></br>" + "<p class='btn'><a href='../DevAlarm/DevAla.html?SN=" + arr_sn[i] + "' target='fname'"
+ "'>报警配置</a></p>" +"<p class='btn'><a href='../DevAlarmView/DevAlarmView.html?SN=" + arr_sn[i] + "' target='fname'"
+ "'>报警信息</a></p>"+"<p class='btn'><a href='../DevRun/DevRun.html?SN=" + arr_sn[i] + "' target='fname'"
+ "'>实时数据</a></p>"+"<p class='btn'><a href='../history/history.html?SN=" + arr_sn[i] + "' target='fname'"
+ "'>历史数据</a></p>"+"<p class='btn'><a href='../DevCfg/DevCfg.html?SN=" + arr_sn[i] + "' target='fname'"
+ "'>数据可视与报警开关配置</a></p>";
marker = new BMap.Marker(arr_point[i]);
map.addOverlay(marker); //var lable = new BMap.Label(content,{offset:new BMap.Size(20,-10)});
//marker.setLabel(lable);
addClickHandler(content,marker); //添加点击处理程序（点击会出现sn码等信息）
}
}function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}function translateOnline(code){
if (code == 0) {return "离线";} else if(code == 1) {return "在线";} else{return "error";}
}function openInfo(content,e){
var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口}</script>로그인 후 복사
여기서는 코드의 js 부분에만 중점을 두고 있습니다. 아래에서는 쉽게 볼 수 있도록 다음 키 코드를 다시 게시합니다.
var arr_longitude = new Array();var arr_latitude = new Array();var arr_sn = new Array();var arr_status = new Array();var arr_point = new Array();var mapSpots = new Array;var url = "http://image.tupian114.com/20140419/09274112.png";var content;var myIcon = new BMap.Icon(url, new BMap.Size(40,30));var opts = {
width : 180, // 信息窗口宽度
height: 180, // 信息窗口高度
title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};// //获取经纬度
$(function()
{
$.ajax({
url: "mysql.search.handle.php",
type: "GET",
dataType:"json",
async:false,
success:function(data)
{
// alert(data.Status);//弹出接收到的数据，调试用
// alert(data.La);//弹出接收到的数据，调试用
// alert(data.SNstr);//弹出接收到的数据，调试用
// alert(data.Long.split("_").length);//split是实现从一串用特定符号来连接的字符串中一次提取有用字符的功能（如me_you_he 用‘_’连接，用split可实现对me、you、he进行提取）
var longstring=data.Long+''; var lastring=data.La+''; var SNstring=data.SNstr+''; var Statusstring=data.Status+''; for(var i=0;i < longstring.split("_").length;i++)
{
arr_longitude[i]=longstring.split("_")[i];
arr_latitude[i] = lastring.split("_")[i];
arr_sn[i] = SNstring.split("_")[i];
arr_status[i] = Statusstring.split("_")[i]; // alert("设备状态"+arr_status[i]);
arr_point[i] = new BMap.Point(arr_longitude[i],arr_latitude[i]);
marker = new BMap.Marker(arr_point[i]);
map.addOverlay(marker);
}
addSpots(longstring.split("_").length);
} ,
error: function(XMLHttpRequest, textStatus, errorThrown) {//这个error函数调试时非常有用，如果解析不正确，将会弹出错误框 alert(XMLHttpRequest.responseText);
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus); // parser error;
}
});
});로그인 후 복사
초기 프로세스에서 코드를 작성할 때 그림에 표시된 것처럼 프로그램을 디버깅해야 하기 때문에 배경에 많은 디버깅 정보가 표시되었지만 이 정보는 json 형식이 아닙니다. 이러한 json 형식이 아닌 정보는 에코되어 프런트 데스크에서 수신됩니다. 하지만 프론트엔드의 ajax는 json 형식으로 수신하도록 지정되어 있기 때문에 json 형식이 아닌 파일을 수신하면 ajax 프로그램은 실행에 성공을 입력하지 않고 오류를 입력하고 오류 메시지를 팝업하게 됩니다. . 동시에 유형에 따라 브라우저가 팝업됩니다.
XML 오류: 루트 디렉토리를 찾을 수 없음(Firefox), flie를 로드할 수 없음:...(Google 크롬) 및 기타 오류.
배운 내용: 백엔드가 프런트엔드에서 얻을 수 있는 json 형식의 데이터를 출력할 때 echo가 유용한 데이터를 출력하는 경우를 제외하고는 echo를 사용하여 다른 쓸모 없는 데이터를 출력할 수 없다는 점을 기억하세요. 프론트엔드 데이터 수신 형식.
위 내용은 제가 프로젝트를 진행하면서 겪은 소소한 경험입니다. 잘못된 부분이 있으면 비판하고 수정해주세요! ,
관련 권장 사항:
php
php에서 echo에 쉼표와 점을 사용하는 것의 차이점에 대한 자세한 설명 echo
php에서 echo와 print의 차이점을 알고 계십니까? ?
위 내용은 PHP의 echo 문 남용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
