まず最初に、私のプログラムの構造と実装する機能を簡単に紹介します。 つまり、このプログラムの主な機能は、地図上に既知の住所、経度、緯度を持つ特定の点を表示することです。主にフロントエンド(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格式输出 */?>//下面是前端代码：<!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> に示すように、プログラムをデバッグする必要があるため、バックグラウンドでプログラム内の多くのデバッグ情報がエコーされますが、この情報は JSON 形式ではありません。これらの非 JSON 形式の情報はエコーされ、フロント デスクによって受信されます。ただし、フロントエンドのajaxはjson形式で受信するように指定されているため、json形式以外のファイルを受信した場合、ajaxプログラムは実行成功にならず、エラーとなりエラーメッセージがポップアップします。同時に、種類に応じてブラウザがポップアップ表示されます。
XML エラー: ルート ディレクトリが見つかりません (Firefox)、flie を読み込めませんでした:...(Google chrome) などのエラーが表示されます。
上記はプロジェクトプロセスにおける私の小さな経験です。誤りがある場合は、批判して修正してください。 ,
phpのechoでのカンマとドットの使用の違いの詳細な説明
以上がPHPにおけるecho文の悪用について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
