O JS chama a API do mapa Baidu e o ponto no mapa para adicionar rótulos

Autor：Eve Cole Data da Última Atualização：2025-08-23 05:16:01

Quero fazer uma página da web recentemente, o conteúdo específico é: há um título na parte superior, a parte inferior é dividida em duas peças e a esquerda é o mapa. E há dois pontos no mapa. Clicar em dois pontos fornecerá informações rápidas correspondentes para exibir as duas informações mais recentes de dados no banco de dados. À direita estão algumas descrições de texto. Eu apenas comecei a estudar e não me saí muito bem.

O efeito geral é o seguinte:

Primeiro, crie um novo arquivo map.php, o código é o seguinte

A cópia do código é a seguinte:

<! Doctype html>

<? php

Crie uma conexão com o banco de dados

$ conn = mysql_connect ("", "", "") ou die ("não pode se conectar ao servidor");

mysql_select_db ("hdm0410292_db", $ conn);

mysql_query ("set nomes utf8");

// Selecione os dados mais recentes inseridos pelos dois carros e armazene as duas declarações na matriz

$ sql0 = "Selecione * de car_info onde carid = '20140508'order by id des Desc Limit 1";

$ sql1 = "Selecione * de car_info onde carid = '20140510' Ordem por id des Desc Limit 1";

$ sql = matriz ($ sql0, $ sql1);

<html>

<head>

<title> Internet de informações sobre o veículo Exibir </ititure>

html {

Altura: 99%}

corpo{

Altura: 99,9%;

largura: 99%;

Fonte-família: kaiti_gb2312;

Size da fonte: 25px}

#container {altura: 100%}

</style>

src = "http://api.map.baidu.com/api?v=1.5&ak=A chave secreta que você solicitou"> </script>

</head>

var LON_CENTER = 0;

var lat_center = 0;

var map = new bmap.map ("contêiner");

<!-Adicionar função de anotação, parâmetros incluem coordenadas de ponto, ID do carro e outras informações no banco de dados->

função addmarker (ponto, índice, s) {

var ficon = new bmap.icon ("car1.png", novo bmap.size (55, 43), {

});

var sicon = new bmap.icon ("car2.png", novo bmap.size (55, 43), {

});

var myicon = "";

// Crie um objeto de anotação e adicione -o ao mapa

if (index == 20140508)

myicon = Ficon;

outro

myicon = sicon;

var marker = new bmap.marker (ponto, {icon: myicon});

map.addoverlay (marcador);

marker.addeventListener ("clique", function () {

var opts = {largura: 450, altura: 500, título: "Detalhes"};

var infowindow = new bmap.infowindow (s, opts);

map.openinfowindow (infowindow, ponto);

});

}

<? php

// transfere duas declarações SQL na matriz

foreach ($ sql como & $ valor) {

$ query = mysql_query ($ valor);

$ row = mysql_fetch_array ($ Query);

var lon = <? php echo $ line [longitude]?>;

var lat = <? php echo $ line [latitude]?>;

<!-Calcule o ponto central de dois pontos e use-o como a posição central quando o mapa for inicializado->

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 $ line [speed]?>" + "Km/h" + "<br/>" +

"Aceleração:" + "<? Php echo $ row [aceleração]?>" + "<br/>" +

"Direção:" + "<? Php echo $ line [direção]?>" + "<br/>" +

"Quantidade de óleo:" + "<? Php echo $ line [óleo]?>" + "<br/>" +

"Endereço:" + "<? Php echo $ row [rua]?>";

var point = new bmap.point (LON, LAT);

addmarker (ponto, <? php echo $ line [carid]?>, info);

<? php

}

<!-Calcule o ponto central de dois pontos e use-o como a posição central quando o mapa for inicializado->

Var Center = new Bmap.Point (LON_CENTER/2, LAT_CENTER/2);

map.CenterandZoom (centro, 17);

map.enablesCrollWheelzoom ();

</script>

</body>

</html>

O arquivo map.php exibe principalmente duas informações no banco de dados, exibindo essas duas informações no local correspondente no mapa.

Em seguida, crie title.php, isso é muito simples, é para exibir um título

A cópia do código é a seguinte:

<! Doctype html>

<html>

<head>

<título> exibição de informações </ititure>

html {

Altura: 100%;}

corpo{

altura: 10%;

largura: 99%;

Fonte-família: kaiti_gb2312;

Size da fonte: 25px}

</style>

</head>

<H1 align = "Center"> Exibição de informações </h1>

</body>

</html>

Em seguida, crie a informação detalhada Descrição do módulo info.php

A cópia do código é a seguinte:

<! Doctype html>

<? php

$ conn = mysql_connect ("", "", "") ou die ("não pode se conectar ao servidor");

mysql_select_db ("", $ conn);

mysql_query ("set nomes utf8");

$ sql0 = "Selecione * de car_info onde carid = '20140508'order by id des Desc Limit 1";

$ sql1 = "Selecione * de car_info onde carid = '20140510' Ordem por id des Desc Limit 1";

$ sql = matriz ($ sql0, $ sql1);

função htmtocode ($ content) {

$ content = str_replace ("/n", "<br>", str_replace ("", "", $ content));

Retornar $ conteúdo;

}

<html>

<head>

<título> exibição de informações </ititure>

html {

Altura: 90%;}

corpo{

Altura: 90%;

largura: 90%;

Fonte-família: kaiti_gb2312;

Size da fonte: 20px}

</style>

</head>

<H1 align = "Center"> Exibição de informações </h1>

<? php foreach ($ sql como & $ value) {

$ query = mysql_query ($ valor);

$ row = mysql_fetch_array ($ Query);

<h2> carro <? Php echo $ line [carid]?> Detalhes </h2>

<HR>

ID do carro: <? Php echo $ line [carid]?> <br>

Longitude: <? Php echo $ row [longitude]?> <br>

Latitude: <? Php echo $ line [latitude]?> <br>

Velocidade: <? Php echo $ line [velocidade]?> Km/h <br>

Aceleração: <? Php echo $ line [aceleração]?> <br>

Direção: <? Php echo $ line [direção]?> <br>

Quantidade de óleo: <? Php echo $ line [óleo]?> <br>

Endereço: <? Php echo $ Row [rua]?> <br>

Hora: <? Php echo $ row [data]?>

<? php}?>

</body>

</html>

Finalmente, estou escrevendo um arquivo vanet.php, que liga principalmente para os três primeiros arquivos

A cópia do código é a seguinte:

<! Doctype html>

<html>

<head>

<título> exibição de informações </ititure>

</head>

</frameSet>

</html>