まず最初に、私のプログラムの構造と実装する機能を簡単に紹介します。 つまり、このプログラムの主な機能は、地図上に既知の住所、経度、緯度を持つ特定の点を表示することです。主にフロントエンド(html+css+js)、バックエンド(php)、データベース(mysql)の3つのモジュールに分かれており、それぞれ以下の機能を実装しています。
データベース: 特定の場所の緯度と経度の情報を保存します (プロジェクトでは会社の特定のハードウェア デバイスの位置を表示する必要があるため、デバイス アドレスと呼びます)。
バックエンド: このバックエンドによって実装される機能。 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格式输出 */?>ログイン後にコピー
フロントエンド: フロントエンドの主な機能は、Baidu 地図 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 部分のみに焦点を当てます。以下に、見やすくするためにこれらの主要なコードを再投稿します。コードを記述すると、図
に示すように、プログラムをデバッグする必要があるため、バックグラウンドでプログラム内の多くのデバッグ情報がエコーされますが、この情報は JSON 形式ではありません。これらの非 JSON 形式の情報はエコーされ、フロント デスクによって受信されます。ただし、フロントエンドのajaxはjson形式で受信するように指定されているため、json形式以外のファイルを受信した場合、ajaxプログラムは実行成功にならず、エラーとなりエラーメッセージがポップアップします。同時に、種類に応じてブラウザがポップアップ表示されます。
XML エラー: ルート ディレクトリが見つかりません (Firefox)、flie を読み込めませんでした:...(Google chrome) などのエラーが表示されます。
教訓: バックエンドがフロントエンドが取得できるようにデータを json 形式で出力する場合、echo が有用なデータを出力する場合を除き、echo を他の無駄なデータの出力に使用することはできません。そうしないと、フロントエンドのデータ受信フォーマット。
上記はプロジェクトプロセスにおける私の小さな経験です。誤りがある場合は、批判して修正してください。 ,
関連する推奨事項:
phpのechoでのカンマとドットの使用の違いの詳細な説明
phpは1つまたは複数の文字列関数を出力します echo
phpのechoとprintの違いを知っていますか?
以上がPHPにおけるecho文の悪用について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
