Quiero hacer una página web recientemente, el contenido específico es: hay un título en la parte superior, la parte inferior se divide en dos piezas y la izquierda es el mapa. Y hay dos puntos en el mapa. Al hacer clic en dos puntos, proporcionará información de solicitud correspondiente para mostrar las últimas dos información de datos en la base de datos. A la derecha hay algunas descripciones de texto. Empecé a estudiar y no me fue muy bien.
El efecto general es el siguiente:
Primero cree un nuevo archivo map.php, el código es el siguiente
La copia del código es la siguiente:
<! Doctype html>
<? Php
/*
Crear una conexión a la base de datos
*/
$ conn = mysql_connect ("", "", "") o morir ("no puede conectarse al servidor");
mysql_select_db ("HDM0410292_DB", $ Conn);
mysql_query ("establecer nombres utf8");
// Seleccione los últimos datos insertados por los dos autos y almacene las dos declaraciones en la matriz
$ sql0 = "seleccione * de Car_info Where CarID = '20140508'order por ID DESC LIMIT 1";
$ sql1 = "seleccione * de Car_info Where CarID = '20140510' Orden por ID DESC LIMIT 1";
$ sql = array ($ sql0, $ sql1);
?>
<html>
<Evista>
<Meta name = "Viewport" Content = "Initial-Scale = 1.0, user-Scalable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<título> Pantalla de información de Internet de vehículo </title>
<style type = "text/css">
html {
Altura: 99%}
cuerpo{
Altura: 99.9%;
Ancho: 99%;
Font-Family: Kaiti_GB2312;
tamaño de fuente: 25px}
#container {altura: 100%}
</style>
<script type = "text/javaScript"
src = "http://api.map.baidu.com/api?v=1.5&ak=la clave secreta que solicitó"> </script>
</ablo>
<Body Bgcolor = "#Caffff">
<div id = "contenedor"> </div>
<script type = "text/javaScript">
var lon_center = 0;
var lat_center = 0;
var map = new BMap.map ("Container");
<!-Agregar función de anotación, los parámetros incluyen coordenadas de puntos, ID de automóvil y otra información en la base de datos->
función addmarker (punto, índice, 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 = "";
// Crear un objeto de anotación y agréguelo al mapa
if (index == 20140508)
myicon = ficon;
demás
myicon = sicon;
var marcador = new BMap.Marker (punto, {icon: myicon});
map.addoverlay (marcador);
marker.addeventListener ("hacer clic", function () {
var opts = {ancho: 450, altura: 500, título: "Detalles"};
var infowindow = new BMAP.Infowindow (S, Opts);
map.openinfowindow (infowindow, punto);
});
}
<? Php
// transferir dos declaraciones SQL en la matriz
foreach ($ sql as & $ valor) {
$ query = mysql_query ($ valor);
$ row = mysql_fetch_array ($ query);
?>
var lon = <? Php echo $ row [longitud]?>;
var lat = <? Php echo $ row [latitud]?>;
<!-Calcule el punto central de dos puntos y úselo como la posición central cuando se inicializa el mapa->
lon_center += lon;
lat_center += lat;
var id = <? Php echo $ fila [id]?>;
var info = "<br/>" + "Carid:" + "<? Php echo $ row [carid]?>" + "<br/>" +
"Longitud:" + "<? Php Echo $ Row [longitud]?>" + "<br/>" +
"Latitude:" + "<? Php Echo $ Row [Latitude]?>" + "<br/>" +
"Speed:" + "<? Php echo $ fila [velocidad]?>" + "Km/h" + "<br/>" +
"Aceleración:" + "<? Php Echo $ Row [Aceleración]?>" + "<br/>" +
"Dirección:" + "<? Php Echo $ Row [dirección]?>" + "<br/>" +
"Cantidad de aceite:" + "<? Php Echo $ Row [aceite]?>" + "<br/>" +
"Dirección:" + "<? Php Echo $ Row [Street]?>";
punto var = nuevo BMAP.Point (Lon, Lat);
addmarker (punto, <? Php echo $ row [carid]?>, info);
<? Php
}
?>
<!-Calcule el punto central de dos puntos y úselo como la posición central cuando se inicializa el mapa->
var Center = new BMap.Point (lon_center/2, lat_center/2);
map.centerandzoom (centro, 17);
MAP.ENABLECROLLWHHEELZOOM ();
</script>
</body>
</html>
El archivo map.php muestra principalmente dos piezas de información en la base de datos, mostrando estas dos piezas de información en la ubicación correspondiente en el mapa.
Luego crea Title.php, esto es muy simple, es para mostrar un título
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<Meta name = "Viewport" Content = "Initial-Scale = 1.0, user-Scalable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Display de información </title>
<style type = "text/css">
html {
Altura: 100%;}
cuerpo{
Altura: 10%;
Ancho: 99%;
Font-Family: Kaiti_GB2312;
tamaño de fuente: 25px}
</style>
</ablo>
<Body Bgcolor = "#Caffff">
<H1 align = "Center"> Display de información </h1>
</body>
</html>
Luego cree la información detallada de la información Información del módulo.php
La copia del código es la siguiente:
<! Doctype html>
<? Php
$ conn = mysql_connect ("", "", "") o morir ("no puede conectarse al servidor");
mysql_select_db ("", $ conn);
mysql_query ("establecer nombres utf8");
$ sql0 = "seleccione * de Car_info Where CarID = '20140508'order por ID DESC LIMIT 1";
$ sql1 = "seleccione * de Car_info Where CarID = '20140510' Orden por ID DESC LIMIT 1";
$ sql = array ($ sql0, $ sql1);
función htmtocode ($ content) {
$ content = str_replace ("/n", "<br>", str_replace ("", "", $ content));
devolver $ contenido;
}
?>
<html>
<Evista>
<Meta name = "Viewport" Content = "Initial-Scale = 1.0, user-Scalable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Display de información </title>
<style type = "text/css">
html {
Altura: 90%;}
cuerpo{
Altura: 90%;
Ancho: 90%;
Font-Family: Kaiti_GB2312;
tamaño de fuente: 20px}
</style>
</ablo>
<Body Bgcolor = "#Caffff">
<H1 align = "Center"> Display de información </h1>
<? Php foreach ($ sql as & $ valor) {
$ query = mysql_query ($ valor);
$ row = mysql_fetch_array ($ query);
?>
<h2> car <? Php echo $ row [carid]?> Detalles </h2>
<hr>
ID de coche: <? Php Echo $ Row [Carid]?> <br>
Longitud: <? Php Echo $ Row [Longitud]?> <br>
Latitud: <? Php Echo $ Row [Latitude]?> <br>
Velocidad: <? Php Echo $ row [velocidad]?> Km/h <br>
Aceleración: <? Php Echo $ Row [Aceleración]?> <br>
Dirección: <? Php Echo $ row [dirección]?> <br>
Cantidad de aceite: <? Php Echo $ Row [Oil]?> <br>
Dirección: <? Php Echo $ Row [Street]?> <br>
Hora: <? Php Echo $ Row [fecha]?>
<? Php}?>
</body>
</html>
Finalmente, estoy escribiendo un archivo vanet.php, que principalmente llama a los tres primeros archivos
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<Meta name = "Viewport" Content = "Initial-Scale = 1.0, user-Scalable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Display de información </title>
</ablo>
<Frameset Rows = "10%, 90%" Frameset filas = "10%, 90%" FrameBorder = 1>
<Frame src = "title.php"> </frame>
<Frameset cols = "70%, 30%">
<Frame src = "map.php">
<Frame src = "info.php">
</Frameset>
</Frameset>
</html>