أرغب في إنشاء صفحة ويب مؤخرًا ، والمحتوى المحدد هو: هناك عنوان في الأعلى ، ويتم تقسيم الجزء السفلي إلى قطعتين ، واليسار هو الخريطة. وهناك نقطتان على الخريطة. سيوفر النقر على نقطتين معلومات مطالبة مقابلة لعرض أحدث معلومات بيانات في قاعدة البيانات. على اليمين بعض أوصاف النص. لقد بدأت للتو في الدراسة ولم أفعل بشكل جيد.
التأثير الكلي على النحو التالي:
قم أولاً بإنشاء ملف map.php جديد ، والرمز كما يلي
نسخة الكود كما يلي:
<! doctype html>
<؟ PHP
/*
قم بإنشاء اتصال بقاعدة البيانات
*/
$ conn = mysql_connect ("" "أو" "أو" ") أو يموت (" لا يمكن الاتصال بالخادم ") ؛
mysql_select_db ("HDM0410292_DB" ، $ conn) ؛
mysql_query ("تعيين الأسماء utf8") ؛
// حدد أحدث البيانات التي تم إدراجها بواسطة سيارتين وتخزين البيانين في المصفوفة
$ SQL0 = "SELECT * from CAR_INFO حيث carid = '20140508'ORDER بواسطة ID DESC limit 1" ؛
$ SQL1 = "SELECT * from CAR_INFO حيث carid = '20140510' أمر بواسطة ID DESC limit 1" ؛
$ sql = array ($ sql0 ، $ sql1) ؛
؟>
<html>
<head>
<meta name = "viewport" content = "scale scale = 1.0 ، charalable = no" />
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> عرض معلومات السيارة </title>
<type type = "text/css">
html {
الارتفاع: 99 ٪}
جسم{
الارتفاع: 99.9 ٪ ؛
العرض: 99 ٪ ؛
Font-Family: Kaiti_GB2312 ؛
حجم الخط: 25 بكسل}
#container {الارتفاع: 100 ٪}
</style>
<script type = "text/javaScript"
src = "http://api.map.baidu.com/api؟v=1.5&ak= the secret key الذي تقدمت إليه"> </script>
</head>
<body bgcolor = "#caffff">
<div id = "container"> </viv>
<script type = "text/javaScript">
var lon_center = 0 ؛
var lat_center = 0 ؛
var map = new bmap.map ("Container") ؛
<!-إضافة وظيفة التعليقات التوضيحية ، تتضمن المعلمات إحداثيات النقاط ومعرف السيارة وغيرها من المعلومات في قاعدة البيانات->
وظيفة AddMarker (نقطة ، فهرس ، 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 = "" ؛
// قم بإنشاء كائن شرح وأضفه إلى الخريطة
إذا (الفهرس == 20140508)
myicon = ficon ؛
آخر
myicon = sicon ؛
var marker = new bmap.marker (point ، {icon: myicon}) ؛
map.addoverlay (علامة) ؛
Marker.AdDeventListener ("Click" ، Function () {
var opts = {width: 450 ، الارتفاع: 500 ، العنوان: "التفاصيل"} ؛
var infoWindow = new bmap.infowindow (s ، opts) ؛
map.openinfowindow (InfoWindow ، point) ؛
}) ؛
}
<؟ PHP
// نقل بيانين SQL في المصفوفة
foreach ($ sql as & $ value) {
$ query = mysql_query ($ value) ؛
$ row = mysql_fetch_array ($ Query) ؛
؟>
var lon = <؟ php echo $ row [loncitude]؟> ؛
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 [street]؟>" ؛
var point = new bmap.point (lon ، lat) ؛
addMarker (point ، <؟ php echo $ row [carid]؟> ، info) ؛
<؟ PHP
}
؟>
<!-احسب النقطة المركزية لنقطتين واستخدمها كموضع مركزي عند تهيئة الخريطة->
var center = new 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 = "scale scale = 1.0 ، charalable = no" />
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> عرض المعلومات </title>
<type type = "text/css">
html {
الارتفاع: 100 ٪ ؛}
جسم{
الارتفاع: 10 ٪ ؛
العرض: 99 ٪ ؛
Font-Family: Kaiti_GB2312 ؛
حجم الخط: 25 بكسل}
</style>
</head>
<body bgcolor = "#caffff">
<h1 align = "center"> عرض المعلومات </h1>
</body>
</html>
ثم قم بإنشاء وحدة وصف مفصلة عن المعلومات info.php
نسخة الكود كما يلي:
<! doctype html>
<؟ PHP
$ conn = mysql_connect ("" "أو" "أو" ") أو يموت (" لا يمكن الاتصال بالخادم ") ؛
mysql_select_db ("" ، $ conn) ؛
mysql_query ("تعيين الأسماء utf8") ؛
$ SQL0 = "SELECT * from CAR_INFO حيث carid = '20140508'ORDER بواسطة ID DESC limit 1" ؛
$ SQL1 = "SELECT * from CAR_INFO حيث carid = '20140510' أمر بواسطة ID DESC limit 1" ؛
$ sql = array ($ sql0 ، $ sql1) ؛
وظيفة htmtocode ($ content) {
$ content = str_replace ("/n" ، "<br>" ، str_replace ("" ، "" ، $ content)) ؛
إرجاع محتوى $ ؛
}
؟>
<html>
<head>
<meta name = "viewport" content = "scale scale = 1.0 ، charalable = no" />
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> عرض المعلومات </title>
<type type = "text/css">
html {
الارتفاع: 90 ٪ ؛}
جسم{
الارتفاع: 90 ٪ ؛
العرض: 90 ٪ ؛
Font-Family: Kaiti_GB2312 ؛
حجم الخط: 20 بكسل}
</style>
</head>
<body bgcolor = "#caffff">
<h1 align = "center"> عرض المعلومات </h1>
<؟ php foreach ($ sql as & $ value) {
$ query = mysql_query ($ value) ؛
$ row = mysql_fetch_array ($ Query) ؛
؟>
<h2> Car <؟ php echo $ row [carid]؟> التفاصيل </h2>
<hr>
معرف السيارة: <؟ php echo $ row [carid]؟> <br>
خط الطول: <؟ php echo $ row [خط الطول]؟> <br>
Latitude: <؟ php echo $ row [latitude]؟
السرعة: <؟ php echo $ row [speed]؟> km/h <br>
التسارع: <؟ php echo $ row [تسارع]؟> <br>
الاتجاه: <؟ php echo $ row [الاتجاه]؟> <br>
كمية الزيت: <؟
العنوان: <؟ php echo $ row [street]؟> <br>
الوقت: <؟ php echo $ row [date]؟>
<؟ php}؟>
</body>
</html>
أخيرًا ، أكتب ملف Vanet.php ، والذي يدعو الملفات الثلاثة الأولى بشكل أساسي
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta name = "viewport" content = "scale scale = 1.0 ، charalable = no" />
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> عرض المعلومات </title>
</head>
<الإطارات صفوف = "10 ٪ ، 90 ٪" ، صفوف الإطارات = "10 ٪ ، 90 ٪" FrameBorder = 1>
<frame src = "title.php"> </rame>
<الإطارات cols = "70 ٪ ، 30 ٪">
<frame src = "map.php">
<frame src = "info.php">
</frameet>
</frameet>
</html>