Ich möchte kürzlich eine Webseite erstellen, der spezifische Inhalt lautet: oben befindet sich ein Titel, der Boden ist in zwei Teile unterteilt und die linke ist die Karte. Und es gibt zwei Punkte auf der Karte. Wenn Sie auf zwei Punkte klicken, werden entsprechende Eingabeaufforderungsinformationen angezeigt, um die beiden neuesten Dateninformationen in der Datenbank anzuzeigen. Auf der rechten Seite stehen einige Textbeschreibungen. Ich habe gerade angefangen zu lernen und ging es nicht sehr gut.
Der Gesamteffekt ist wie folgt:
Erstellen Sie zunächst eine neue map.php -Datei, der Code ist wie folgt
Die Codekopie lautet wie folgt:
<! DocType html>
<? Php
/*
Erstellen Sie eine Verbindung zur Datenbank
*/
$ conn = mysql_connect ("", "", "") oder sterben ("kann keine Verbindung zum Server herstellen");
mysql_select_db ("HDM0410292_DB", $ conn);
mysql_query ("Namen utf8");
// Wählen Sie die neuesten Daten aus, die von den beiden Autos eingefügt wurden, und speichern Sie die beiden Aussagen im Array
$ SQL0 = "SELECT * von car_info wobei carid = '20140508'order durch id desc -limit 1";
$ sql1 = "SELECT * von car_info wobei carid = '20140510' order nach id desc limit 1";
$ SQL = Array ($ SQL0, $ SQL1);
?>
<html>
<kopf>
<meta name = "viewport" content = "initial scale = 1.0, user-scalable = no" />
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Internet der Fahrzeuginformationen Anzeige </title>
<style type = "text/css">
html {
Höhe: 99%}
Körper{
Höhe: 99,9%;
Breite: 99%;
Schriftfamilie: Kaiti_GB2312;
Schriftgröße: 25px}
#Container {Höhe: 100%}
</style>
<script type = "text/javaScript"
src = "http://api.map.baidu.com/api?v=1.5&ak=the geheime Schlüssel, für die Sie sich beworben haben"> </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");
<!-Annotationsfunktion hinzufügen, Parameter enthalten Punktkoordinaten, CAR-ID und andere Informationen in der Datenbank->
Funktion Addmarker (Punkt, 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 = "";
// Erstellen Sie ein Annotationsobjekt und fügen Sie es der Karte hinzu
if (index == 20140508)
Myicon = Ficon;
anders
Myicon = Sicon;
var marker = new bmap.marker (Punkt, {icon: myicon});
map.adDoverlay (Marker);
marker.addeventListener ("klicken", function () {
var opts = {width: 450, Höhe: 500, Titel: "Details"};
var infowindow = new bmap.infowindow (s, opts);
map.openinfowindow (Infowindow, Punkt);
});
}
<? Php
// Zwei SQL -Anweisungen im Array übertragen
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]?>;
<!-Berechnen Sie den Mittelpunkt von zwei Punkten und verwenden Sie ihn als Mittelposition, wenn die Karte initialisiert wird->
lon_center += lon;
lat_center += lat;
var id = <? php echo $ row [id]?>;
var info = "<br/>" + "carid:" + "<? php echo $ row [carid]?>" + "<br/>" + + +
"Längengrad:" + "<? Php Echo $ row [Länge]?>" + "<br/>" + +
"Breitengrad:" + "<? Php Echo $ row [Breitengrad]?>" + "<br/>" + +
"Geschwindigkeit:" + "<? Php Echo $ row [Speed]?>" + "Km/h" + "<br/>" + +
"Beschleunigung:" + "<? Php echo $ row [Beschleunigung]?>" + "<br/>" + +
"Richtung:" + "<? Php Echo $ row [Richtung]?>" + "<br/>" + +
"Ölmenge:" + "<? Php Echo $ row [Öl]?>" + "<br/>" + +
"Adresse:" + "<? Php echo $ row [street]?>";
var point = neuer BMAP.Point (Lon, Lat);
Addmarker (Punkt, <? php echo $ row [carid]?>, info);
<? Php
}
?>
<!-Berechnen Sie den Mittelpunkt von zwei Punkten und verwenden Sie ihn als Mittelposition, wenn die Karte initialisiert wird->
var Center = new BMAP.Point (lon_center/2, lat_center/2);
MAP.Centerandzoom (Mitte, 17);
map.EnablesCrollwheelzoom ();
</script>
</body>
</html>
In der Datei map.php werden hauptsächlich zwei Informationen in der Datenbank angezeigt und diese beiden Informationen im entsprechenden Speicherort auf der Karte angezeigt.
Erstellen Sie dann title.php, dies ist sehr einfach, es soll einen Titel angezeigt
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta name = "viewport" content = "initial scale = 1.0, user-scalable = no" />
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Informationsanzeige </title>
<style type = "text/css">
html {
Höhe: 100%;}
Körper{
Höhe: 10%;
Breite: 99%;
Schriftfamilie: Kaiti_GB2312;
Schriftgröße: 25px}
</style>
</head>
<Body Bgcolor = "#CAFFFF">
<H1 align = "center"> Informationen Anzeige </h1>
</body>
</html>
Erstellen Sie dann die detaillierte Informationen Beschreibung Modul info.php
Die Codekopie lautet wie folgt:
<! DocType html>
<? Php
$ conn = mysql_connect ("", "", "") oder sterben ("kann keine Verbindung zum Server herstellen");
mysql_select_db ("", $ conn);
mysql_query ("Namen utf8");
$ SQL0 = "SELECT * von car_info wobei carid = '20140508'order durch id desc -limit 1";
$ sql1 = "SELECT * von car_info wobei carid = '20140510' order nach id desc limit 1";
$ SQL = Array ($ SQL0, $ SQL1);
Funktion htmtocode ($ content) {
$ content = str_replace ("/n", "<br>", str_replace ("", "", $ content);
$ content zurückgeben;
}
?>
<html>
<kopf>
<meta name = "viewport" content = "initial scale = 1.0, user-scalable = no" />
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Informationsanzeige </title>
<style type = "text/css">
html {
Höhe: 90%;}
Körper{
Höhe: 90%;
Breite: 90%;
Schriftfamilie: Kaiti_GB2312;
Schriftgröße: 20px}
</style>
</head>
<Body Bgcolor = "#CAFFFF">
<H1 align = "center"> Informationen Anzeige </h1>
<? php foreach ($ sql as & $ value) {
$ query = mysql_query ($ value);
$ row = mysql_fetch_array ($ query);
?>
<h2> Auto <? Php Echo $ row [carid]?> Details </h2>
<hr>
CAR ID: <? Php Echo $ row [carid]?> <br>
Länge: <? Php Echo $ row [Länge]?> <br>
Breitengrad: <? Php Echo $ row [Breitengrad]?> <br>
Geschwindigkeit: <? Php Echo $ row [Geschwindigkeit]?> Km/h <br>
Beschleunigung: <? Php Echo $ row [Beschleunigung]?> <br>
Richtung: <? Php echo $ row [Richtung]?> <br>
Ölmenge: <? Php Echo $ row [Öl]?> <br>
Adresse: <? Php echo $ row [street]?> <br>
Zeit: <? Php Echo $ row [Datum]?>
<? php}?>
</body>
</html>
Schließlich schreibe ich eine Vanet.php -Datei, in der hauptsächlich die ersten drei Dateien aufgerufen werden
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta name = "viewport" content = "initial scale = 1.0, user-scalable = no" />
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Informationsanzeige </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>