First, briefly describe the structure of my program and the features to be implemented: In short, the main function of the program is to achieve a known address latitude and longitude of a point on the map on the map, the program is divided into three modules: Front end (HTML+CSS+JS), Background (PHP), database ( MySQL), the three module implements the following functions, respectively.
Database: Stores latitude and longitude information for a location (because the project requirement shows the location of a company's hardware device, so I call it the device address);
Backstage: The function of this background is to query the address information (latitude and longitude) of the device that satisfies the condition through the SQL statement, and then output the address information in JSON format, so that the front page can be obtained by Ajax method;
Background code: <?phpsession_start ();//Find the database header ("Content-type:text/html;charset=utf-8"); include "conn.php"; mysql_ Query ("Set names UTF8");//read old information $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 Us Eflag=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); Online monitoring/////////////////////$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" and "$statusstr");// Array of JSON-formatted echo urldecode (Json_encode ($resultJson));//json format Output */?>
Front end: The main function of the front-end is, by invoking the Baidu Map API, displaying a map, and using JS (Ajax) from the background to obtain the latitude and longitude information as the location parameters into the map stroke function, The ability to display a point on a map (of course, the information in my code from the background is not only latitude and longitude, but because it is a map program, focus mainly on the latitude and longitude, so the elaboration process only to mention latitude and longitude, ignoring other information);
Here is the front-end code: <! DOCTYPE html>
Here we focus only on the JS section of the code, below the key code to re-paste it for easy viewing:
var arr_longitude = new Array (), var arr_latitude = new Array (), var arr_sn = new Array (), var arr_status = new Array (), Var a Rr_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,//Information window width height:180,//Information window height title: "Information Window",//Information window title enablemessage:true//Set Allow Information window to send short interest };////Get latitude and longitude $ (function () {$.ajax ({url: "mysql.search.handle.php", type: "GET", DataType: "JSON", Async:false, Success:function (data) { Alert (data. Status)//Popup received data, debug with//alert (data. LA);//Popup received data, debug with//alert (data. SNSTR);//Popup received data, debug with//alert (data. Long.split ("_"). length);//split is the ability to extract useful characters once from a string of strings that are concatenated with a particular symbol (such as me_you_he with ' _ '), which can be implemented with split for me, you, hE to extract) 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]=longstri Ng.split ("_") [I]; Arr_latitude[i] = Lastring.split ("_") [I]; Arr_sn[i] = Snstring.split ("_") [I]; Arr_status[i] = Statusstring.split ("_") [I]; Alert ("Device status" +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) {//This error function is very useful when debugging, if parsing is not correct, it will playOut Error box alert (xmlhttprequest.responsetext); alert (xmlhttprequest.status); alert (xmlhttprequest.readystate); alert (textstatus); Parser error; } }); });
In the initial writing process, the background because of the debugging program needs, in the program echo a lot of debugging information,
, but this information is not in JSON format and is received by the foreground when these non-JSON-formatted messages are echo. However, the Ajax of the foreground is specified in JSON format, so when a file is received in a non-JSON format, the AJAX program does not enter the success, but instead enters the error message, and the browser pops up, depending on the kind:
XML error: Root directory not found (Firefox), Flie could not being load: ... (Google Chrome) and other errors.
Lesson: When the background output data in JSON format for the foreground get, remember that in addition to echo output useful data, echo output all other useless data, otherwise it will cause the foreground data receive format error.
Above for I do the project in the process of a little experience, if there is falsehood, please criticize correct! 、