Tout d'abord, permettez-moi de vous présenter brièvement la structure de mon programme et les fonctions à mettre en œuvre : En bref, la fonction principale de ce programme est d'afficher un certain point avec l'adresse, la longitude et la latitude connues sur la carte. Le programme est principalement divisé en trois modules : front-end (html+css+js), back-end (php) et base de données (mysql). Les trois modules implémentent respectivement les fonctions suivantes.
Base de données : stocke les informations de latitude et de longitude d'un certain emplacement (car le projet nécessite l'affichage de l'emplacement d'un certain périphérique matériel de l'entreprise, c'est pourquoi je l'appelle - adresse de l'appareil
Backend : implémenté par) ; ce backend La fonction principale est d'interroger les informations d'adresse (latitude et longitude) de l'équipement qui répond aux conditions dans la base de données via des instructions SQL, puis de générer les informations d'adresse au format json afin que la page frontale puisse les obtenir via 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 : La fonction principale du front-end est d'afficher une carte en appelant l'API Baidu Map, et de remplir les informations de longitude et de latitude obtenues en arrière-plan via js ( ajax) comme paramètres de localisation dans la fonction de point de carte pour afficher un certain point sur la fonction de carte (bien sûr, les informations obtenues à partir de l'arrière-plan dans mon code ne sont pas seulement la longitude et la latitude, mais parce qu'il s'agit d'un programme cartographique, le focus. est principalement sur la longitude et la latitude, donc seules la longitude et la latitude sont mentionnées dans le processus d'explication, et les autres informations sont ignorées
//下面是前端代码:<!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>
Ici, nous nous concentrons uniquement sur la partie js du code, et republions) ces codes clés ci-dessous pour une visualisation facile :
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; } }); });
Dans le processus initial d'écriture du code, en raison de la nécessité de déboguer le programme en arrière-plan, de nombreuses informations de débogage sont répercutées dans le programme, comme indiqué dans la figure :
, mais ces informations ne sont pas au format json. Lorsque ces informations au format non-json sont répercutées, elles seront reçues par la réception. . Cependant, l'ajax au niveau du front-end est désigné pour être reçu au format json, donc lorsqu'un fichier dans un format non-json est reçu, le programme ajax n'entrera pas le succès de l'exécution, mais entrera l'erreur pour afficher un message d'erreur. message d'erreur. En même temps, le navigateur apparaîtra en fonction du type. Des erreurs telles que :
Erreur XML : répertoire racine introuvable (Firefox), flie n'a pas pu être chargé :... (Google Chrome) et d'autres erreurs.
Leçons apprises : Lorsque l'arrière-plan génère des données au format json pour que la réception puisse les obtenir, n'oubliez pas que, sauf lorsque echo génère des données utiles, echo ne peut pas être utilisé pour générer tous les autres données inutiles, sinon cela provoquera une erreur dans le format de réception des données de premier plan.
Ce qui précède est ma petite expérience dans le processus de projet. S'il y a des erreurs, veuillez les critiquer et les corriger ! ,
Recommandations associées :
php génère un ou plusieurs Fonction de chaîne echo
Connaissez-vous la différence entre echo et print en php ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!