ฉันต้องการสร้างหน้าเว็บเมื่อเร็ว ๆ นี้เนื้อหาเฉพาะคือ: มีชื่อเรื่องอยู่ด้านบนด้านล่างแบ่งออกเป็นสองชิ้นและด้านซ้ายคือแผนที่ และมีสองจุดบนแผนที่ การคลิกที่สองจุดจะให้ข้อมูลพรอมต์ที่สอดคล้องกันเพื่อแสดงข้อมูลสองข้อมูลล่าสุดในฐานข้อมูล ด้านขวามีคำอธิบายข้อความ ฉันเพิ่งเริ่มเรียนและทำไม่ค่อยดีนัก
ผลกระทบโดยรวมมีดังนี้:
ก่อนอื่นสร้างไฟล์ map.php ใหม่รหัสมีดังนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<? php
-
สร้างการเชื่อมต่อกับฐานข้อมูล
-
$ conn = mysql_connect ("", "", "") หรือตาย ("ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์");
mysql_select_db ("HDM0410292_DB", $ conn);
mysql_query ("ตั้งชื่อ UTF8");
// เลือกข้อมูลล่าสุดที่แทรกโดยรถยนต์สองคันและเก็บคำสั่งสองรายการไว้ในอาร์เรย์
$ sql0 = "เลือก * จาก car_info โดยที่ carid = '20140508'order โดย id desc limit 1";
$ sql1 = "เลือก * จาก car_info โดยที่ carid = '20140510' คำสั่งซื้อตาม ID Desc Limit 1";
$ sql = array ($ sql0, $ sql1);
-
<html>
<head>
<meta name = "viewport" content = "เริ่มต้น = 1.0, scalable 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 {
ความสูง: 99%}
ร่างกาย{
ความสูง: 99.9%;
ความกว้าง: 99%;
Font-Family: Kaiti_GB2312;
ขนาดตัวอักษร: 25px}
#Container {ความสูง: 100%}
</style>
<script type = "text/javascript"
src = "http://api.map.baidu.com/api?v=1.5&ak=the คีย์ลับที่คุณสมัคร"> </script>
</head>
<body bgcolor = "#caffff">
<div id = "container"> </div>
<script type = "text/javascript">
var lon_center = 0;
var lat_center = 0;
var map = ใหม่ bmap.map ("คอนเทนเนอร์");
<!-เพิ่มฟังก์ชั่นคำอธิบายประกอบพารามิเตอร์รวมถึงพิกัดจุดรหัสรถยนต์และข้อมูลอื่น ๆ ในฐานข้อมูล->
ฟังก์ชั่น addmarker (จุด, ดัชนี, s) {
var ficon = ใหม่ bmap.icon ("car1.png", bmap.size ใหม่ (55, 43), {
-
var sicon = ใหม่ bmap.icon ("car2.png", ใหม่ bmap.size (55, 43), {
-
var myicon = "";
// สร้างวัตถุคำอธิบายประกอบและเพิ่มลงในแผนที่
ถ้า (ดัชนี == 20140508)
myicon = ficon;
อื่น
myicon = sicon;
var marker = ใหม่ bmap.marker (จุด, {icon: myicon});
map.addoverlay (marker);
marker.addeventListener ("คลิก", function () {
var opts = {width: 450, ความสูง: 500, ชื่อเรื่อง: "รายละเอียด"};
var infowindow = ใหม่ bmap.infowindow (s, opts);
map.openinfowindow (infowindow, point);
-
-
<? php
// โอนคำสั่ง SQL สองใบในอาร์เรย์
foreach ($ sql เป็น & $ value) {
$ query = mysql_query ($ value);
$ row = mysql_fetch_array ($ query);
-
var lon = <? php echo $ row [ลองจิจูด]?>;
var lat = <? php echo $ row [latitude]?>;
<!-คำนวณจุดกึ่งกลางของสองจุดและใช้เป็นตำแหน่งกึ่งกลางเมื่อแผนที่เริ่มต้น->
lon_center += lon;
lat_center += lat;
var id = <? php echo $ row [id]?>;
var info = "<br/>" + "carid:" + "<? php echo $ row [carid]?>" + "<br/>" +
"ลองจิจูด:" + "<? php echo $ row [ลองจิจูด]?>" + "<br/>" +
"ละติจูด:" + "<? php echo $ row [ละติจูด]?>" + "<br/>" +
"ความเร็ว:" + "<? php echo $ row [ความเร็ว]?>" + "km/h" + "<br/>"
"การเร่งความเร็ว:" + "<? php echo $ row [การเร่งความเร็ว]?>" + "<br/>" +
"ทิศทาง:" + "<? php echo $ row [ทิศทาง]?>" + "<br/>" +
"ปริมาณน้ำมัน:" + "<? php echo $ row [น้ำมัน]?>" + "<br/>" +
"ที่อยู่:" + "<? php echo $ row [Street]?>";
var point = ใหม่ bmap.point (lon, lat);
addmarker (จุด <? php echo $ row [carid]?>, ข้อมูล);
<? php
-
-
<!-คำนวณจุดกึ่งกลางของสองจุดและใช้เป็นตำแหน่งกึ่งกลางเมื่อแผนที่เริ่มต้น->
var center = ใหม่ bmap.point (lon_center/2, lat_center/2);
MAP.CENTERANDZOOM (กลาง, 17);
map.enablescrollwheelzoom ();
</script>
</body>
</html>
ไฟล์ map.php ส่วนใหญ่จะแสดงข้อมูลสองชิ้นในฐานข้อมูลโดยแสดงข้อมูลสองชิ้นนี้ในตำแหน่งที่สอดคล้องกันบนแผนที่
จากนั้นสร้าง title.php นี่เป็นเรื่องง่ายมากมันคือการแสดงชื่อเรื่อง
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta name = "viewport" content = "เริ่มต้น = 1.0, scalable user-scalable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> ข้อมูลการแสดงผล </title>
<style type = "text/css">
html {
ความสูง: 100%;}
ร่างกาย{
ความสูง: 10%;
ความกว้าง: 99%;
Font-Family: Kaiti_GB2312;
ขนาดตัวอักษร: 25px}
</style>
</head>
<body bgcolor = "#caffff">
<h1 allign = "center"> แสดงข้อมูล </h1>
</body>
</html>
จากนั้นสร้างข้อมูลรายละเอียดคำอธิบาย module info.php
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<? php
$ conn = mysql_connect ("", "", "") หรือตาย ("ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์");
mysql_select_db ("", $ conn);
mysql_query ("ตั้งชื่อ UTF8");
$ sql0 = "เลือก * จาก car_info โดยที่ carid = '20140508'order โดย id desc limit 1";
$ sql1 = "เลือก * จาก car_info โดยที่ carid = '20140510' คำสั่งซื้อตาม ID Desc Limit 1";
$ sql = array ($ sql0, $ sql1);
ฟังก์ชั่น htmtocode ($ เนื้อหา) {
$ content = str_replace ("/n", "<br>", str_replace ("", "", $ เนื้อหา));
ส่งคืนเนื้อหา $;
-
-
<html>
<head>
<meta name = "viewport" content = "เริ่มต้น = 1.0, scalable user-scalable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> ข้อมูลการแสดงผล </title>
<style type = "text/css">
html {
ความสูง: 90%;}
ร่างกาย{
ความสูง: 90%;
ความกว้าง: 90%;
Font-Family: Kaiti_GB2312;
ขนาดตัวอักษร: 20px}
</style>
</head>
<body bgcolor = "#caffff">
<h1 allign = "center"> แสดงข้อมูล </h1>
<? php foreach ($ sql เป็น & $ value) {
$ query = mysql_query ($ value);
$ row = mysql_fetch_array ($ query);
-
<H2> car <? php echo $ row [carid]?> รายละเอียด </h2>
<Hr>
ID Car: <? php echo $ row [carid]?> <br>
ลองจิจูด: <? php echo $ row [ลองจิจูด]?> <br>
Latitude: <? php echo $ row [latitude]?> <br>
ความเร็ว: <? php echo $ row [ความเร็ว]?> km/h <br>
การเร่งความเร็ว: <? php echo $ row [การเร่งความเร็ว]?> <br>
ทิศทาง: <? php echo $ row [ทิศทาง]?> <br>
ปริมาณน้ำมัน: <? php echo $ row [น้ำมัน]?> <br>
ที่อยู่: <? php echo $ row [street]?> <br>
เวลา: <? php echo $ row [วันที่]?>
<? php}?>
</body>
</html>
ในที่สุดฉันกำลังเขียนไฟล์ vanet.php ซึ่งส่วนใหญ่เรียกไฟล์สามไฟล์แรก
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta name = "viewport" content = "เริ่มต้น = 1.0, scalable user-scalable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> ข้อมูลการแสดงผล </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>