JS appelle l'API et le point de la carte Baidu sur la carte pour ajouter des étiquettes

Auteur：Eve Cole Date de mise à jour：2025-08-23 05:16:01

Je veux créer une page Web récemment, le contenu spécifique est: il y a un titre en haut, le bas est divisé en deux pièces et la gauche est la carte. Et il y a deux points sur la carte. Cliquer sur deux points fournira des informations rapides correspondantes pour afficher les deux dernières informations de données dans la base de données. À droite se trouvent quelques descriptions de texte. Je viens de commencer à étudier et je n'ai pas très bien fait.

L'effet global est le suivant:

Créez d'abord un nouveau fichier map.php, le code est le suivant

La copie de code est la suivante:

<! Doctype html>

<? Php

/ *

Créer une connexion à la base de données

* /

$ conn = mysql_connect ("", "", "") ou die ("ne peut se connecter au serveur");

mysql_select_db ("HDM0410292_DB", $ Conn);

mysql_query ("set names utf8");

// sélectionnez les dernières données insérées par les deux voitures et stockez les deux instructions du tableau

$ SQL0 = "SELECT * FROM CAR_INFO WHERE CARID = '20140508'ORDER BY ID DESC LIMIT 1";

$ SQL1 = "SELECT * FROM Car_info Where Carid = '20140510' Ordre by id Desc Limit 1";

$ SQL = Array ($ SQL0, $ SQL1);

<html>

<adal>

<Title> Affichage d'informations sur l'Internet des véhicules </TOME>

html {

Hauteur: 99%}

corps{

Hauteur: 99,9%;

Largeur: 99%;

Font-Family: Kaiti_GB2312;

taille de police: 25px}

#Container {hauteur: 100%}

</ style>

src = "http://api.map.baidu.com/api?v=1.5&ak= la clé secrète que vous avez postulée pour"> </ script>

</ head>

var lon_center = 0;

var lat_center = 0;

var map = new Bmap.map ("conteneur");

<! - Ajouter la fonction d'annotation, les paramètres incluent les coordonnées ponctuelles, l'ID de voiture et d'autres informations dans la base de données ->

fonction addmarker (point, 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 = "";

// Créez un objet d'annotation et ajoutez-le à la carte

if (index == 20140508)

Myicon = Ficon;

autre

Myicon = SICON;

var marker = new Bmap.marker (point, {icon: myicon});

map.AdDoverlay (marqueur);

marker.addeventListener ("cliquez", fonction () {

var opts = {largeur: 450, hauteur: 500, titre: "Détails"};

var infowindow = new BMAP.infowIndow (s, opts);

Map.OpenInFowIndow (Infowindow, point);

});

}

<? Php

// transférer deux instructions SQL dans le tableau

ForEach ($ SQL AS & $ VALEUR) {

$ query = mysql_query ($ valeur);

$ row = mysql_fetch_array ($ query);

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

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

<! - Calculez le point central de deux points et utilisez-le comme position centrale lorsque la carte est initialisée ->

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

"Accélération:" + "<? Php echo $ row [accélération]?>" + "<br/>" +

"Direction:" + "<? Php echo $ row [direction]?>" + "<br/>" +

"Quantité d'huile:" + "<? Php echo $ row [huile]?>" + "<br/>" +

"Adresse:" + "<? Php echo $ row [street]?>";

var Point = new Bmap.point (lon, lat);

addmarker (point, <? php echo $ row [carid]?>, info);

<? Php

}

<! - Calculez le point central de deux points et utilisez-le comme position centrale lorsque la carte est initialisée ->

var Center = new Bmap.point (lon_center / 2, lat_center / 2);

map.CenterandZoom (Centre, 17);

map.enablesCrollWeelZoom ();

</cript>

</docy>

</html>

Le fichier map.php affiche principalement deux informations dans la base de données, affichant ces deux informations dans l'emplacement correspondant sur la carte.

Puis créez title.php, c'est très simple, c'est d'afficher un titre

La copie de code est la suivante:

<! Doctype html>

<html>

<adal>

<Title> Affichage d'informations </TITME>

html {

Hauteur: 100%;}

corps{

hauteur: 10%;

Largeur: 99%;

Font-Family: Kaiti_GB2312;

taille de police: 25px}

</ style>

</ head>

<H1 Align = "Center"> Affichage d'informations </h1>

</docy>

</html>

Créez ensuite les informations détaillées Description du module Info.php

La copie de code est la suivante:

<! Doctype html>

<? Php

$ conn = mysql_connect ("", "", "") ou die ("ne peut se connecter au serveur");

mysql_select_db ("", $ conn);

mysql_query ("set names utf8");

$ SQL0 = "SELECT * FROM CAR_INFO WHERE CARID = '20140508'ORDER BY ID DESC LIMIT 1";

$ SQL1 = "SELECT * FROM Car_info Where Carid = '20140510' Ordre by id Desc Limit 1";

$ SQL = Array ($ SQL0, $ SQL1);

fonction htmtocode ($ contenu) {

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

retourner $ contenu;

}

<html>

<adal>

<Title> Affichage d'informations </TITME>

html {

hauteur: 90%;}

corps{

Hauteur: 90%;

Largeur: 90%;

Font-Family: Kaiti_GB2312;

taille de police: 20px}

</ style>

</ head>

<H1 Align = "Center"> Affichage d'informations </h1>

<? Php ForEach ($ sql as & $ valeur) {

$ query = mysql_query ($ valeur);

$ row = mysql_fetch_array ($ query);

<h2> voiture <? Php echo $ row [carid]?> Détails </h2>

<hr>

ID de voiture: <? Php echo $ row [carid]?> <br>

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

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

Vitesse: <? Php echo $ row [Speed]?> Km / h <br>

Accélération: <? Php echo $ row [accélération]?> <br>

Direction: <? Php echo $ row [Direction]?> <br>

Quantité d'huile: <? Php echo $ row [huile]?> <br>

Adresse: <? Php echo $ row [street]?> <br>

Heure: <? Php echo $ row [date]?>

<? php}?>

</docy>

</html>

Enfin, j'écris un fichier Vanet.php, qui appelle principalement les trois premiers fichiers

La copie de code est la suivante:

<! Doctype html>

<html>

<adal>

<Title> Affichage d'informations </TITME>

</ head>

</ FrameSet>

</html>