Maison > Article > développement back-end > Utilisation de l'API Baidu Map pour implémenter la visualisation de cartes régionales et la superposition de couches en PHP

Utilisation de l'API Baidu Map pour implémenter la visualisation de cartes régionales et la superposition de couches en PHP

WBOYoriginal: 2023-07-30 12:31:561010parcourir

Utilisez l'API Baidu Map en PHP pour réaliser la visualisation et la superposition de couches de cartes de zone

Introduction :
Avec l'évolution des temps, les cartes sont devenues un élément indispensable de nos vies. Dans le développement Web, l’utilisation de l’API cartographique est également de plus en plus répandue. Cet article explique comment utiliser PHP et l'API Baidu Map pour visualiser des cartes de zone et effectuer des opérations de superposition de couches.

1. Préparation
Avant de commencer, nous devons préparer certaines choses :

Compte de développeur Baidu Map : Nous devons enregistrer un compte de développeur sur la plateforme ouverte Baidu Map et créer une application.
Environnement de serveur PHP : notre code doit s'exécuter dans un environnement de serveur PHP, assurez-vous d'avoir terminé la configuration de l'environnement.

2. Obtenez la clé API Baidu Map

Connectez-vous à la plateforme ouverte Baidu Map et entrez dans l'interface de la console.
Créez une candidature et remplissez les informations pertinentes telles que le nom de la candidature et l'adresse de rappel.
Après une création réussie, vous pouvez trouver la clé API Baidu Map dont nous avons besoin dans la page de détails de l'application.

3. Créez une page de carte

Créez un fichier PHP, nommez-le map.html et ajoutez la structure HTML de base suivante :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>区域图可视化</title>
    <style type="text/css">
        /* 设置地图容器的宽高 */
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

Présentez la bibliothèque JavaScript et les fichiers de style de Baidu Map :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>区域图可视化</title>
    <style type="text/css">
        /* 设置地图容器的宽高 */
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

4. , dessinez une carte de la zone

Dans la partie JavaScript, utilisez la classe Map de l'API Baidu Map pour créer un objet cartographique :

var map = new BMap.Map("map");

Définissez le point central et le niveau de zoom de la carte :

map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);

Ajoutez et dessinez une zone :

var polygon = new BMap.Polygon([
    new BMap.Point(116.387112,39.920977),
    new BMap.Point(116.385243,39.913063),
    new BMap.Point(116.394226,39.917988)
], {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5}); // 设置区域的样式
map.addOverlay(polygon);

5. Superposition de calques
Il existe de nombreuses façons d'ajouter une superposition de carte Cet article prend comme exemple l'ajout d'un outil de dessin à la souris :

Dans la partie JavaScript, créez un outil de dessin à la souris et liez-le. à la carte :

var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: true, // 是否开启绘制模式
    enableDrawingTool: true, // 是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, // 工具栏的位置
        offset: new BMap.Size(5, 5), // 工具栏的偏移量
        drawingModes: [
            BMAP_DRAWING_POLYGON // 仅显示多边形绘制工具
        ]
    }
});

Écoute de l'événement d'achèvement du dessin, obtenez les coordonnées de la zone dessinée :

drawingManager.addEventListener('polygoncomplete', function(polygon) {
    var overlay = polygon.getPath(); // 获取绘制的区域坐标
    // 执行其他操作，比如将坐标传给后端进行处理等
});

6. Exemple de code complet




    
    区域图可视化

Conclusion :
Grâce aux étapes ci-dessus, nous avons utilisé avec succès PHP et l'API Baidu Map pour réaliser la visualisation et la superposition de couches de la carte de zone. Vous pouvez ajuster le style de la carte de la zone dessinée ou traiter la zone selon vos propres besoins. Je vous souhaite une bonne utilisation !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript html map 对象事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez PHP pour appeler la caméra pour la reconnaissance gestuelle : créez des applications interactivesArticle suivant：Utilisez PHP pour appeler la caméra pour la reconnaissance gestuelle : créez des applications interactives

Articles Liés

Voir plus