首先簡要介紹我的程式的結構以及要實現的功能： 簡而言之，該程式主要功能是實現將已知地址經緯度的某個點在地圖上在地圖上顯示出來，程式主要分為三個模組：分別是前端（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格式输出 */?>前端：前端的主要功能是，透過呼叫百度地圖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;
}
});
});在最初寫程式碼過程中，後台因為調試程式的需要，在程式中echo了很多調試訊息，如圖：
，但是這些訊息並不是json格式的，當這些非json格式的訊息被echo後，會被前台接收到。但前台的ajax是指定以json格式接收的，所以當接收到非json格式的文件後，ajax程式不會進入success裡執行，而是進入error裡彈出錯誤訊息，同時，瀏覽器會根據種類不同彈出諸如：
XML 錯誤：找不到根目錄（火狐firefox）、flie could not be load :……(Googlechrome)等錯誤。
經驗教訓：當後台透過json格式輸出資料以供前台get時，切記，除了echo輸出有用資料時,不可用echo輸出其他一切無用數據，否則會造成前台資料接收格式出錯。
以上為本人做專案過程中的一點小經驗，如有謬誤，請批評指正！ 、
相關推薦：
以上是PHP中echo語句濫用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
