Position actuelle: Accueil> Derniers articles> Utilisez PHP pour combiner l'API de la carte Gaode pour implémenter facilement la fonction de marquage de la carte interactive

Utilisez PHP pour combiner l'API de la carte Gaode pour implémenter facilement la fonction de marquage de la carte interactive

M66 2025-07-17

Créer des marqueurs de carte interactifs avec PHP et l'API de la carte Gaode

À l'ère d'Internet mobile, les services de cartes sont devenus un outil important pour les utilisateurs pour obtenir des informations géographiques. Qu'il s'agisse de trouver des emplacements, de planifier des itinéraires ou d'explorer un environnement, la carte offre une grande commodité. L'API GAODE MAP fournit des interfaces riches, combinées aux puissantes capacités de traitement des backend de PHP, il peut facilement créer une riche carte interactive avec des fonctionnalités.

Préparation

Tout d'abord, vous devez enregistrer un compte de développeur Gaode, créer une nouvelle application de service Web et obtenir la clé de développeur (clé), qui est une condition nécessaire pour appeler l'API.

Implémentation de code

Voici la structure HTML de base et le code connexe qui implémente les balises de carte interactives:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Exemple de marquage de carte interactive</title>
  <style>
    #map {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
  <script src="https://webapi.amap.com/ui/1.1/main.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // Créer un objet de carte
    var map = new AMap.Map("map", {
      zoom: 13, // Définir le niveau de zoom de la carte
      center: [116.397428, 39.90923] // Définissez les coordonnées du point central de la carte
    });

    // Ajouter un contrôle de carte
    AMap.plugin(['AMap.ToolBar'], function() {
      map.addControl(new AMap.ToolBar());
    });

    // Cliquez sur l&#39;événement de la carte
    map.on('click', function(e) {
      // Obtenez les coordonnées de latitude et de longitude du clic
      var lnglat = e.lnglat;
      var longitude = lnglat.getLng();
      var latitude = lnglat.getLat();

      // créer Marker Objet et ajouter à la carte
      var marker = new AMap.Marker({
        position: [longitude, latitude]
      });
      map.add(marker);

      // La fenêtre contextuelle affiche des informations de latitude et de longitude
      var infoWindow = new AMap.InfoWindow({
        content: 'longitude：' + longitude + '<br>latitude：' + latitude
      });
      marker.on('click', function() {
        infoWindow.open(map, marker.getPosition());
      });
    });
  </script>
</body>
</html>

Analyse de code

  • Introduisez Gaode MAP et JQuery Library Resources pour faciliter l'appel des API associées.
  • Créez un objet MAP et définissez le niveau de zoom initial et le point central.
  • Ajoutez des contrôles de la barre d'outils pour améliorer l'interactivité des cartes.
  • Écoutez l'événement de clic de la carte pour obtenir la latitude et la longitude de l'emplacement de clic.
  • Générez des points de marquage et ajoutez-les à la carte.
  • Cliquez sur la fenêtre contextuelle de point de marque pour afficher les informations de latitude et de longitude correspondantes.

Choses à noter

  • Veuillez remplacer votre_Key dans le code par la touche de développeur que vous avez postulé sur la plate-forme Gaode Open.
  • L'API GAODE MAP adopte le protocole HTTPS et il est recommandé de déployer des pages Web sur des serveurs qui prennent en charge HTTPS pour éviter les avertissements de sécurité du navigateur.

Résumer

Cet article montre comment combiner PHP avec l'API GAODE MAP pour implémenter une fonction de marquage de carte interactive de base. Sur cette base, les développeurs peuvent étendre la planification des itinéraires, la recherche de localisation géographique et d'autres fonctions pratiques en fonction de leurs besoins. L'application de la technologie MAP peut améliorer considérablement l'expérience utilisateur et apporter l'affichage et l'interaction pratique des informations géographiques.

Connexe