Recently to do a Web page, the specific content is: Top has a title, the bottom is divided into two pieces, the left is a map. And there are two points on the map, click on the two points have a corresponding hint information, display the database of the latest two data information. On the right is some text description. I just started to learn, do not very good
The overall effect looks like this:
First create a new map.php file with the following code
Copy Code code as follows:
<! DOCTYPE html>
<?php
/*
To create a connection to a database
*/
$conn =mysql_connect ("", "", "") or Die ("Can not connect to server");
mysql_select_db ("hdm0410292_db", $conn);
mysql_query ("Set names UTF8");
Select two cars to insert the latest data, and the two statements exist in the array
$sql 0= "SELECT * from Car_info where carid= ' 20140508 ' ORDER BY id desc limit 1";
$sql 1= "SELECT * from Car_info where carid= ' 20140510 ' ORDER BY id desc limit 1";
$sql =array ($sql 0, $sql 1);
?>
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Car Networking Information Display </title>
<style type= "Text/css" >
html{
height:99%}
body{
height:99.9%;
width:99%;
Font-family: italics _gb2312;
FONT-SIZE:25PX}
#container {height:100%}
</style>
<script type= "Text/javascript"
Src= "http://api.map.baidu.com/api?v=1.5&ak= your application's secret key" ></script>
<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 annotations to the 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 a callout 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: "Detailed information"};
var Infowindow = new Bmap.infowindow (s,opts);
Map.openinfowindow (Infowindow,point);
});
}
<?php
Traversal of two SQL statements in an 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]?>;
<!--calculates the central point of the two points and takes it as the central location 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 Volume:" + "<?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
}
?>
<!--calculates the central point of the two points and takes it as the central location when the map is initialized-->
var center = new Bmap.point (LON_CENTER/2,LAT_CENTER/2);
Map.centerandzoom (center, 17);
Map.enablescrollwheelzoom ();
</script>
</body>
The map.php file is primarily a display of two information in the database, showing the two messages in the corresponding position on the map.
And then build title.php, this is very simple, is to display a title
Copy Code code as follows:
<! DOCTYPE html>
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Information Show </title>
<style type= "Text/css" >
html{
height:100%;}
body{
height:10%;
width:99%;
Font-family: italics _gb2312;
FONT-SIZE:25PX}
</style>
<body bgcolor= "#CAFFFF" >
<H1 align= "CENTER" > Information show </H1>
</body>
Then in the establishment of the detailed information module info.php
Copy Code code as follows:
<! DOCTYPE html>
<?php
$conn =mysql_connect ("", "", "") or Die ("Can not connect to server");
mysql_select_db ("", $conn);
mysql_query ("Set names UTF8");
$sql 0= "SELECT * from Car_info where carid= ' 20140508 ' ORDER BY id desc limit 1";
$sql 1= "SELECT * from Car_info where carid= ' 20140510 ' ORDER BY id desc limit 1";
$sql =array ($sql 0, $sql 1);
function Htmtocode ($content) {
$content =str_replace ("\ n", "<br>", Str_replace ("", "", $content));
return $content;
}
?>
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Information Show </title>
<style type= "Text/css" >
html{
height:90%;}
body{
height:90%;
width:90%;
Font-family: italics _gb2312;
font-size:20px}
</style>
<body bgcolor= "#CAFFFF" >
<H1 align= "CENTER" > Information show </H1>
<?php foreach ($sql as & $value) {
$query =mysql_query ($value);
$row =mysql_fetch_array ($query);
?>
<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 content: <?php echo $row [oil]?><br>
Address: <?php Echo $row [street]?><br>
Time: <?php Echo $row [date]?>
<?php}?>
</body>
Finally, in writing a vanet.php file, the file is mainly called the first three files
Copy Code code as follows:
<! DOCTYPE html>
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Information Show </title>
<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>
