Lassen Sie mich zunächst kurz den Aufbau meines Programms und die zu implementierenden Funktionen vorstellen: Kurz gesagt besteht die Hauptfunktion dieses Programms darin, einen bestimmten Punkt mit der bekannten Adresse, Längen- und Breitengrad auf der Karte anzuzeigen. Das Programm ist hauptsächlich in drei Module unterteilt: Front-End (HTML + CSS + JS), Back-End (PHP) und Datenbank (MySQL). Die drei Module implementieren jeweils die folgenden Funktionen.
Datenbank: speichert die Breiten- und Längengradinformationen eines bestimmten Standorts (da das Projekt die Anzeige des Standorts eines bestimmten Hardwaregeräts des Unternehmens erfordert, daher nenne ich es - Geräteadresse);
Backend: implementiert von Die Hauptfunktion dieses Backends besteht darin, die Adressinformationen (Breitengrad und Längengrad) der Geräte, die die Bedingungen in der Datenbank erfüllen, über SQL-Anweisungen abzufragen und die Adressinformationen dann im JSON-Format auszugeben, damit die Front-End-Seite sie abrufen kann 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格式输出 */?>Nach dem Login kopieren
Front-End: Die Hauptfunktion des Front-Ends besteht darin, eine Karte durch Aufrufen der Baidu-Karten-API anzuzeigen und die aus dem Hintergrund erhaltenen Längen- und Breitengradinformationen über js einzugeben ( Ajax) als Standortparameter in die Kartenpunktfunktion, um einen bestimmten Punkt auf der Kartenfunktion anzuzeigen (natürlich sind die aus dem Hintergrund in meinem Code erhaltenen Informationen nicht nur Längen- und Breitengrad, sondern, weil es ein Kartenprogramm ist, der Fokus bezieht sich hauptsächlich auf Längen- und Breitengrad, daher werden im Erklärungsprozess nur Längen- und Breitengrad erwähnt und andere Informationen werden ignoriert); - Veröffentlichen Sie diese Schlüsselcodes unten, damit Sie sie leichter sehen können:
//下面是前端代码：<!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>Nach dem Login kopieren
Im ersten Prozess des Schreibens des Codes werden aufgrund der Notwendigkeit, das Programm im Hintergrund zu debuggen, viele Debugging-Informationen im Programm wiedergegeben , wie in der Abbildung gezeigt:
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;
}
});
});Nach dem Login kopieren
, aber diese Informationen liegen nicht im JSON-Format vor. Wenn diese Informationen im Nicht-JSON-Format wiedergegeben werden, werden sie von empfangen Rezeption. Der Ajax am Frontend ist jedoch für den Empfang im JSON-Format vorgesehen. Wenn also eine Datei in einem Nicht-JSON-Format empfangen wird, meldet das Ajax-Programm bei der Ausführung keinen Erfolg, sondern einen Fehler und zeigt eine Fehlermeldung an . Gleichzeitig werden im Browser je nach Typ Fehler angezeigt wie: 
XML-Fehler: Stammverzeichnis nicht gefunden (Firefox), Datei konnte nicht geladen werden:... (Google Chrome) und andere Fehler .
Gelernte Erkenntnisse: Wenn der Hintergrund Daten im JSON-Format ausgibt, damit die Rezeption sie abrufen kann, denken Sie daran, dass Echo nicht zur Ausgabe anderer Daten verwendet werden kann, außer wenn Echo nützliche Daten ausgibt Unbrauchbare Daten, andernfalls führt dies zu einem Fehler im Empfangsformat der Vordergrunddaten.
Das Obige ist meine kleine Erfahrung im Projektprozess. Wenn es Irrtümer gibt, kritisieren und korrigieren Sie diese bitte! ,
Verwandte Empfehlungen:
Detaillierte Erklärung des Unterschieds zwischen der Verwendung von Kommas und Punkten für Echo in PHP
PHP gibt eine oder mehrere aus String-Funktion echo
Kennen Sie den Unterschied zwischen echo und print in PHP?
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Missbrauchs der Echo-Anweisung in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
