먼저 내 프로그램의 구조와 구현될 기능을 간략하게 소개하겠습니다. 간단히 말해서 이 프로그램의 주요 기능은 알려진 주소, 경도 및 위도가 있는 특정 지점을 지도에 표시하는 것입니다. 크게 세 부분으로 나누어집니다. 프론트엔드(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格式输出 */?>//下面是前端代码：<!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>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;
}
});
});XML 오류: 루트 디렉토리를 찾을 수 없음(Firefox), flie를 로드할 수 없음:...(Google 크롬) 및 기타 오류.
관련 권장 사항:php
php에서 echo에 쉼표와 점을 사용하는 것의 차이점에 대한 자세한 설명 echo
php에서 echo와 print의 차이점을 알고 계십니까? ?
위 내용은 PHP의 echo 문 남용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
