Comment implémenter la fonction d'annotation de la carte de mise à jour de mise à jour Baidu Map en php

M66 2025-06-11

introduction

Dans le développement Web moderne, l'annotation des cartes est une exigence commune pour de nombreuses applications, et l'API de la carte Baidu, en tant qu'outil de carte puissant, fournit de riches fonctions liées à la carte. Cet article présentera en détail comment combiner PHP avec l'API de la carte Baidu pour réaliser la fonction de mise à jour automatique des annotations MAP.

1. Introduction à l'API de la carte Baidu

L'API Baidu Map est un ensemble d'outils qui offrent aux développeurs un accès aux données de la carte Baidu, y compris l'affichage de la carte, la recherche de localisation, la planification des itinéraires et d'autres fonctions. Parmi les nombreuses fonctions, l'annotation de la carte est un élément couramment utilisé, permettant aux développeurs de marquer des points spécifiques sur la carte, permettant aux utilisateurs d'obtenir des informations pertinentes plus intuitivement.

2. Préparation

Avant de commencer à utiliser l'API Baidu Maps, les préparations suivantes doivent être effectuées:

Enregistrez un compte de développeur Baidu Map et créez une application pour obtenir la clé API.
Téléchargez la bibliothèque JavaScript Baidu Map API.
Introduisez la bibliothèque JavaScript de Baidu Map API sur la page.

3. Étapes pour réaliser la mise à jour automatique des annotations de la carte

1. Créer un conteneur de carte

Dans la page HTML, créez un conteneur avec la largeur et la hauteur appropriées pour afficher la carte. Voici un exemple simple montrant comment créer un conteneur de carte de 500px x 500px:

<div id="map" style="width: 500px; height: 500px;"></div>

2. Initialisez l'objet Map

Dans le code PHP, ajoutez des scripts JavaScript pour initialiser l'objet MAP et le charger dans le conteneur de carte. L'extrait de code suivant montre comment charger dynamiquement les scripts JavaScript via PHP pour réaliser cette fonctionnalité:

<?php
$apiKey = 'tonAPIClé';
echo <<<HTML
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak={$apiKey}"></script>
<script type="text/javascript">
    // Créer un objet de carte
    var map = new BMap.Map("map");
    // Réglez le point central de la carte sur Pékin
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    // Activer le zoom de roue de souris
    map.enableScrollWheelZoom();
</script>
Html;
?>

3. Obtenez des données étiquetées

En PHP, les données de latitude et de longitude requises pour l'annotation de la carte peuvent être obtenues via des requêtes de base de données, etc. Par exemple, ce qui suit est un exemple de tableau contenant des informations de latitude et de longitude pour plusieurs points d'annotation:

<?php
// Interroger les informations de latitude et de longitude de la base de données
$markers = [
    ['lat' => 39.9225, &#39;lng&#39; => 116.396],
    [&#39;lat&#39; => 39.935, &#39;lng&#39; => 116.403],
    [&#39;lat&#39; => 39.927, &#39;lng&#39; => 116.415]
]]
?>

4. Ajouter l'étiquette à la carte

Dans JavaScript, créez une annotation et ajoutez-les à la carte en traversant les données d'annotation obtenues. L'extrait de code suivant montre comment ajouter une étiquette sur la carte:

<?php
echo '<script type="text/javascript"> &#39;;;
foreach ($ marqueurs comme marqueur $) {
    $ lat = $ marqueur [&#39;lat&#39;];
    $ lng = $ marqueur [&#39;lng&#39;];
    echo "var point = new bmap.point ($ lng, $ lat);";
    echo "var marqueur = new bmap.marker (point);";
    echo "map.adDoverlay (marqueur);";
}
écho &#39;</script> &#39;;;
?>

5. Mettez automatiquement à jour l'étiquette

Afin d'obtenir une mise à jour automatique des annotations de la carte, nous pouvons utiliser l'AJAX pour obtenir régulièrement les dernières données d'annotation et mettre à jour les annotations sur la carte. Voici un exemple de code pour les annotations rafraîchissantes en utilisant le temps de l'Ajax:

<script type="text/javascript">
function updateMarkers() {
    // envoyerAjaxDemande d&#39;obtenir les dernières données d&#39;annotation
    $.ajax({
        url: 'get_markers.php',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            // Effacer la marque d&#39;origine
            map.clearOverlays();
            // Traverser les dernières données étiquetées，et ajouter à la carte
            for (var i = 0; i < data.length; i++) {
                var point = new BMap.Point(data[i].lng, data[i].lat);
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
            }
        }
    });
}
<p>// Appelez la fonction qui met à jour l&#39;annotation de temps en temps<br>
setInterval(updateMarkers, 5000);<br>
</script><br>

Conclusion

Grâce aux étapes ci-dessus, nous avons mis en œuvre avec succès la fonction de mise à jour automatique de l'utilisation de l'API Baidu Map dans PHP. Combinés avec JavaScript et Ajax, les données étiquetées peuvent être obtenues et mis à jour régulièrement, permettant aux utilisateurs d'obtenir les dernières informations de carte en temps réel. J'espère que cet article peut vous aider à appliquer les fonctions de cartographie dans le développement Web.

Connexe

Comment utiliser l'API Baidu Map pour obtenir une mise à jour automatique des annotations de la carte dans PHP