Position actuelle: Accueil> Derniers articles> Comment implémenter l'affichage et le contrôle de l'échelle de la carte de l'API de la carte Baidu dans PHP

Comment implémenter l'affichage et le contrôle de l'échelle de la carte de l'API de la carte Baidu dans PHP

M66 2025-09-22

introduction

L'échelle de la carte est un contrôle commun dans les applications de carte. Il est utilisé pour afficher la relation d'échelle de la carte, aidant les utilisateurs à comprendre la relation entre le niveau de zoom et la distance réelle de la carte. Dans le développement de PHP, la combinaison de l'API de la carte Baidu pour réaliser l'affichage et le contrôle des échelles de carte est une compétence très pratique. Cet article présentera en détail comment utiliser l'API Baidu Map pour implémenter cette fonction dans un environnement PHP.

Présentation de l'API de la carte Baidu

Lorsque vous utilisez l'API Baidu Map, vous devez d'abord introduire les fichiers de style JavaScript de Baidu Map et de style CSS à l'échelle CSS dans la page HTML. Il peut être introduit directement via le lien CDN fourni par la plate-forme ouverte Baidu Map.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemple d&#39;échelle de carte</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Votre carte BaiduAPIClé"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
</body>
</html>

Initialiser les commandes de la carte et de l'échelle

Ensuite, nous utilisons le code PHP pour initialiser la carte et ajouter le contrôle d'échelle à la carte. Grâce à l'API Baidu Maps, nous pouvons facilement implémenter cette fonction. Voici un exemple de code pour initialiser la carte et ajouter un contrôle d'échelle:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemple d&#39;échelle de carte</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Votre carte BaiduAPIClé"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <script>
        var map = new BMap.Map("map"); // Créer une instance de carte
        var point = new BMap.Point(116.404, 39.915); // Créer des coordonnées ponctuelles
        map.centerAndZoom(point, 15); // Initialiser la carte，Réglez le point central et le niveau de zoom

        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // Créer un contrôle d&#39;échelle
        map.addControl(scaleControl); // Ajouter un contrôle d&#39;échelle
    </script>
</body>
</html>

Affichage et masque de contrôle de l'échelle de contrôle dynamique

En plus d'ajouter des commandes d'échelle pendant l'initialisation, nous pouvons également contrôler dynamiquement l'affichage et la masquage des commandes d'échelle via les boutons. Voici un exemple de commutation de l'état d'affichage de la commande d'échelle via un bouton:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemple d&#39;échelle de carte</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Votre carte BaiduAPIClé"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <button onclick="toggleScaleControl()">Échelle de commutation</button>
    <script>
        var map = new BMap.Map("map"); // Créer une instance de carte
        var point = new BMap.Point(116.404, 39.915); // Créer des coordonnées ponctuelles
        map.centerAndZoom(point, 15); // Initialiser la carte，Réglez le point central et le niveau de zoom

        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // Créer un contrôle d&#39;échelle
        map.addControl(scaleControl); // Ajouter un contrôle d&#39;échelle

        function toggleScaleControl() {
            if (scaleControl.isVisible()) {
                map.removeControl(scaleControl); // Masquer le contrôle de l&#39;échelle
            } else {
                map.addControl(scaleControl); // Afficher le contrôle de l&#39;échelle
            }
        }
    </script>
</body>
</html>

Résumer

Grâce à l'exemple de code ci-dessus, nous pouvons réaliser avec succès les fonctions d'affichage et de contrôle du contrôle de l'échelle de la carte de l'API de la carte Baidu dans l'environnement PHP. Cela aide non seulement les utilisateurs à mieux comprendre le niveau de zoom de la carte, mais améliore également l'expérience utilisateur. Les développeurs sont libres de modifier et d'étendre ces codes en fonction de leurs besoins.

  • Étiquettes associées:

    API
Connexe
Derniers articles