//後台代碼：<?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格式輸出 */?>
前端：前端的主要功能是，通過調用百度地圖api,顯示一張地圖，並將通過js(ajax)從後台擷取的經緯度資訊作為位置參數填入地圖描點函數裡，實現在地圖上顯示某個點的功能（當然，My Code裡從後台擷取的資訊並不只有經緯度，但因為是一個地圖程式，關注焦點主要在經緯度上，所以闡述過程中只提經緯度，忽略其他資訊）；
//下面是前端代碼：<!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; } }); });
在最初寫代碼過程中，後台因為偵錯工具的需要，在程式中echo了很多調試資訊，
，但是這些資訊並不是json格式的，當這些非json格式的資訊被echo後，會被前台接收到。但前台的ajax是指定以json格式接收的，所以當接收到非json格式的檔案後，ajax程式不會進入success裡執行，而是進入error裡彈出錯誤資訊，同時，瀏覽器會根據種類不同彈出諸如：
XML錯誤：找不到根目錄（Firefoxfirefox）、flie could not be load :……(Googlechrome)等錯誤。
經驗教訓：當後台通過json格式輸出資料以供前台get時，切記，除了echo輸出有用資料時,不可用echo輸出其他一切無用資料，否則會造成前台資料接收格式出錯。
以上為本人做項目過程中的一點小經驗，如有謬誤，請批評指正！、
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
