recherche

Maison >développement back-end >tutoriel php >Créer un événement de clic de superposition de polygones sur une carte à l'aide de PHP et de l'API Amap

Créer un événement de clic de superposition de polygones sur une carte à l'aide de PHP et de l'API Amap

WBOY
WBOYoriginal
2023-07-31 20:21:361056parcourir

Utilisez PHP et l'API Amap pour créer l'événement de clic de superposition de polygones de la carte

Introduction :
Avec le développement d'applications Web, les cartes sont devenues l'un des composants couramment utilisés dans les sites Web. Dans le même temps, de nombreux sites Web ont également des exigences plus élevées en matière d'interactivité des cartes, comme par exemple cliquer sur des superpositions sur la carte pour réaliser certaines fonctions. Cet article explique comment utiliser PHP et l'API Amap pour créer une superposition de polygones sur la carte et implémenter des événements de clic.

Préparation :
Avant de commencer, nous devons enregistrer un compte développeur AutoNavi et créer une application de service Web pour obtenir la clé API correspondante. La clé API est utilisée pour identifier chaque application, elle est donc très importante.

Étape 1 : Configurer l'environnement
Tout d'abord, nous devons configurer un environnement PHP côté serveur. Vous pouvez choisir d'utiliser XAMPP, WAMP ou d'autres outils pour le créer.

Étape 2 : Créer une page HTML
Créez une page HTML sur le serveur et liez-la à la bibliothèque JavaScript de l'API Amap. En même temps, créez un conteneur de carte sur la page comme zone d'affichage de la carte. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>利用PHP和高德地图API创建地图的多边形覆盖物点击事件</title>
    <style type="text/css">
        #mapContainer {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="mapContainer"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
    <script type="text/javascript">
        var map = new AMap.Map('mapContainer', {
            zoom: 13,
            center: [116.39, 39.9]
        });
    </script>
</body>
</html>

Troisième étape : créer la superposition de polygones
Dans la section JavaScript du fichier HTML ci-dessus, nous créons une instance de carte via new AMap.Map. Nous devons maintenant ajouter une superposition de polygones à la carte. 

// 创建多边形覆盖物的坐标数组
var polygonPath = [
    [116.403322, 39.920255],
    [116.410703, 39.897555],
    [116.402292, 39.892353],
    [116.389846, 39.891365],
    [116.381966, 39.899163]
];

// 创建多边形覆盖物
var polygon = new AMap.Polygon({
    path: polygonPath,
    strokeColor: "#FF33FF",
    strokeWeight: 6,
    fillColor: "#1791fc",
    fillOpacity: 0.2
});

// 将多边形覆盖物添加到地图上显示
map.add(polygon);

Quatrième étape : ajouter un événement de clic
Maintenant, nous avons ajouté une superposition de polygones à la carte. L'étape suivante consiste à ajouter un événement de clic à cette superposition. 

// 监听多边形覆盖物的点击事件
AMap.event.addListener(polygon, 'click', function () {
    alert("您点击了多边形覆盖物");
});

Exemple de code complet : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>利用PHP和高德地图API创建地图的多边形覆盖物点击事件</title>
    <style type="text/css">
        #mapContainer {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="mapContainer"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
    <script type="text/javascript">
        var map = new AMap.Map('mapContainer', {
            zoom: 13,
            center: [116.39, 39.9]
        });

        // 创建多边形覆盖物的坐标数组
        var polygonPath = [
            [116.403322, 39.920255],
            [116.410703, 39.897555],
            [116.402292, 39.892353],
            [116.389846, 39.891365],
            [116.381966, 39.899163]
        ];

        // 创建多边形覆盖物
        var polygon = new AMap.Polygon({
            path: polygonPath,
            strokeColor: "#FF33FF",
            strokeWeight: 6,
            fillColor: "#1791fc",
            fillOpacity: 0.2
        });

        // 将多边形覆盖物添加到地图上显示
        map.add(polygon);

        // 监听多边形覆盖物的点击事件
        AMap.event.addListener(polygon, 'click', function () {
            alert("您点击了多边形覆盖物");
        });
    </script>
</body>
</html>

Exécutez le code ci-dessus et vous verrez une superposition de polygones avec la zone spécifiée sur la carte. Lorsque vous cliquez sur cette superposition, une boîte de dialogue apparaît disant "Vous avez cliqué sur la superposition de polygones".

Conclusion : 
En utilisant PHP et l'API Amap, nous pouvons facilement créer des superpositions polygonales de la carte et implémenter des événements de clic. Cette application de carte interactive peut être largement utilisée dans l'immobilier, la navigation touristique et d'autres domaines pour offrir une meilleure expérience utilisateur et un support fonctionnel.

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!

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：Comment utiliser thinkorm pour mettre en œuvre rapidement l'analyse et la création de rapports sur les données d'une base de donnéesArticle suivant：Comment utiliser thinkorm pour mettre en œuvre rapidement l'analyse et la création de rapports sur les données d'une base de données

Articles Liés

Voir plus