I want to make a web page recently, the specific content is: There is a title on the top, the bottom is divided into two pieces, and the left is the map. And there are two points on the map. Clicking on two points will provide corresponding prompt information to display the latest two data information in the database. On the right are some text descriptions. I just started studying and didn't do very well.
The overall effect is as follows:
First create a new map.php file, the code is as follows
The code copy is as follows:
<!DOCTYPE html>
<?php
/*
Create a connection to the database
*/
$conn=mysql_connect("","","") or die("can not connect to server");
mysql_select_db("hdm0410292_db",$conn);
mysql_query("set names utf8");
//Select the latest data inserted by the two cars and store the two statements in the array
$sql0="select * from car_info where carID='20140508'order by id desc limit 1";
$sql1="select * from car_info where carID= '20140510' order by id desc limit 1";
$sql=array($sql0,$sql1);
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Internet of Vehicle Information Display</title>
<style type="text/css">
html{
height:99%}
body{
height:99.9%;
width:99%;
font-family:KaiTi_GB2312;
font-size:25px}
#container {height: 100%}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=1.5&ak=The secret key you applied for"></script>
</head>
<body BGCOLOR="#CAFFFF">
<div id="container"></div>
<script type="text/javascript">
var lon_center = 0;
var lat_center = 0;
var map = new BMap.Map("container");
<!-- Add annotation function, parameters include point coordinates, car ID, and other information in the database-->
function addMarker(point,index,s){
var fIcon = new BMap.Icon("car1.png", new BMap.Size(55, 43), {
});
var sIcon = new BMap.Icon("car2.png", new BMap.Size(55, 43), {
});
var myIcon = "";
// Create an annotation object and add it to the map
if(index == 20140508)
myIcon=fIcon;
else
myIcon=sIcon;
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
marker.addEventListener("click",function(){
var opts={width:450,height:500,title:"Details"};
var infoWindow = new BMap.InfoWindow(s,opts);
map.openInfoWindow(infoWindow,point);
});
}
<?php
//Transfer two sql statements in the array
foreach ($sql as &$value) {
$query=mysql_query($value);
$row=mysql_fetch_array($query);
?>
var lon= <?php echo $row[longitude] ?>;
var lat= <?php echo $row[latitude] ?>;
<!-- Calculate the center point of two points and use it as the center position when the map is initialized-->
lon_center += lon;
lat_center += lat;
var id=<?php echo $row[id] ?>;
var info="<br/>"+"carID: " + "<?php echo $row[carID]?>" + " <br/> " +
"Longitude: " + "<?php echo $row[longitude]?>" + " <br/> " +
"latitude: " + "<?php echo $row[latitude]?>" + " <br/> " +
"Speed: " + "<?php echo $row[speed]?>" + "Km/h" + " <br/> " +
"Acceleration: " + "<?php echo $row[acceleration]?>" + " <br/> " +
"Direction: " + "<?php echo $row[direction]?>" + " <br/> " +
"Oil quantity: " + "<?php echo $row[oil]?>" + "<br/>" +
"Address: " + "<?php echo $row[street]?>";
var point = new BMap.Point(lon, lat);
addMarker(point,<?php echo $row[carID] ?>,info);
<?php
}
?>
<!-- Calculate the center point of two points and use it as the center position when the map is initialized-->
var center = new BMap.Point(lon_center/2,lat_center/2);
map.centerAndZoom(center, 17);
map.enableScrollWheelZoom();
</script>
</body>
</html>
The map.php file mainly displays two pieces of information in the database, displaying these two pieces of information in the corresponding location on the map.
Then create title.php, this is very simple, it is to display a title
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Information Display</title>
<style type="text/css">
html{
height:100%;}
body{
height:10%;
width:99%;
font-family:KaiTi_GB2312;
font-size:25px}
</style>
</head>
<body BGCOLOR="#CAFFFF">
<H1 ALIGN="CENTER"> Information Display</H1>
</body>
</html>
Then create the detailed information description module info.php
The code copy is as follows:
<!DOCTYPE html>
<?php
$conn=mysql_connect("","","") or die("can not connect to server");
mysql_select_db("",$conn);
mysql_query("set names utf8");
$sql0="select * from car_info where carID='20140508'order by id desc limit 1";
$sql1="select * from car_info where carID= '20140510' order by id desc limit 1";
$sql=array($sql0,$sql1);
function htmtocode($content){
$content=str_replace("/n", "<br>", str_replace(" ", " ", $content));
return $content;
}
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Information Display</title>
<style type="text/css">
html{
height:90%;}
body{
height:90%;
width:90%;
font-family:KaiTi_GB2312;
font-size:20px}
</style>
</head>
<body BGCOLOR="#CAFFFF">
<H1 ALIGN="CENTER"> Information Display</H1>
<?php foreach ($sql as &$value) {
$query=mysql_query($value);
$row=mysql_fetch_array($query);
?>
<H2>car <?php echo $row[carID]?> Details</H2>
<HR>
CAR ID: <?php echo $row[carID]?><br>
Longitude: <?php echo $row[longitude]?> <br>
Latitude: <?php echo $row[latitude]?> <br>
Speed: <?php echo $row[speed]?> Km/h <br>
Acceleration: <?php echo $row[acceleration]?><br>
Direction: <?php echo $row[direction]?> <br>
Oil quantity: <?php echo $row[oil]?><br>
Address: <?php echo $row[street]?><br>
Time: <?php echo $row[date]?>
<?php } ?>
</body>
</html>
Finally, I am writing a vanet.php file, which mainly calls the first three files
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Information Display</title>
</head>
<FRAMESET ROWS="10%,90%" FRAMESET ROWS="10%,90%" FRAMEBORDER=1 >
<FRAME SRC="title.php"></FRAME>
<FRAMESET COLS="70%,30%">
<FRAME SRC="map.php">
<FRAME SRC="info.php">
</FRAMESET>
</FRAMESET>
</html>