recherche

Maison >développement back-end >tutoriel php >Créez des marqueurs de carte interactifs à l'aide de PHP et de l'API Amap

Créez des marqueurs de carte interactifs à l'aide de PHP et de l'API Amap

王林
王林original
2023-07-31 17:06:211397parcourir

Utilisez PHP et l'API Amap pour créer des marqueurs cartographiques interactifs

Introduction :
À l'ère moderne de l'Internet mobile, les services de cartographie sont devenus l'un des outils indispensables aux utilisateurs. Que vous recherchiez un emplacement, planifiiez un itinéraire ou recherchiez des informations sur votre environnement, Maps peut vous aider. L'API Amap fournit des services cartographiques riches, combinés aux puissantes capacités de traitement du langage PHP, nous pouvons utiliser les deux pour créer des marqueurs cartographiques interactifs.

Préparation :

  1. Enregistrez un compte développeur Amap.
  2. Créez une nouvelle application de service Web et obtenez la clé de développeur.

Implémentation du code :
Tout d'abord, nous devons préparer une structure de page HTML de base pour accueillir la carte et les fonctions interactives correspondantes. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>交互式地图标记示例</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>
    // 创建地图对象
    var map = new AMap.Map("map", {
      zoom: 13, // 设置地图缩放级别
      center: [116.397428, 39.90923] // 设置地图中心点坐标
    });

    // 添加地图控件
    AMap.plugin(['AMap.ToolBar'], function() {
      map.addControl(new AMap.ToolBar());
    });

    // 点击地图事件
    map.on('click', function(e) {
      // 获取点击的经纬度坐标
      var lnglat = e.lnglat;
      var longitude = lnglat.getLng();
      var latitude = lnglat.getLat();

      // 创建 Marker 对象并添加到地图上
      var marker = new AMap.Marker({
        position: [longitude, latitude]
      });
      map.add(marker);

      // 弹窗显示经纬度信息
      var infoWindow = new AMap.InfoWindow({
        content: '经度：' + longitude + '<br>纬度：' + latitude
      });
      marker.on('click', function() {
        infoWindow.open(map, marker.getPosition());
      });
    });
  </script>
</body>
</html>

Analyse :

  1. En introduisant les liens de ressources de la bibliothèque Amap et jQuery, nous pouvons utiliser les API associées dans la page.
  2. Créez un objet cartographique et définissez le niveau de zoom et les coordonnées du point central.
  3. Ajout de contrôles de carte, y compris la barre d'outils de zoom.
  4. Écoutez l'événement de clic de la carte et obtenez les coordonnées de latitude et de longitude de l'emplacement du clic.
  5. Crée un objet marqueur et l'ajoute à la carte.
  6. Crée un objet de formulaire d'informations et affiche les informations de latitude et de longitude lorsque vous cliquez sur le point marqueur.

Remarque : remplacez

  1. dans le code par votre propre clé de développeur. YOUR_KEY
    2. Étant donné que l'API Amap utilise le protocole HTTPS, il est recommandé de déployer la page Web sur un serveur prenant en charge HTTPS pour éviter les erreurs du navigateur.
Résumé :

Cet article utilise le langage PHP et l'API Amap pour implémenter un exemple simple de marquage de carte interactive. Les lecteurs peuvent étendre davantage les fonctions en fonction de leurs propres besoins et de la documentation de l'API cartographique, comme l'ajout de planification d'itinéraire, de fonctions de recherche, etc. Grâce aux services de cartographie, nous pouvons offrir aux utilisateurs un affichage des informations géographiques et une expérience interactive plus pratiques.

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 jquery html 对象 事件 https
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：Compétences en matière d'exploitation de base de données PHP : Comment utiliser la fonction mysqli_num_rows pour obtenir le nombre de lignes dans le résultat de la requêteArticle suivant：Compétences en matière d'exploitation de base de données PHP : Comment utiliser la fonction mysqli_num_rows pour obtenir le nombre de lignes dans le résultat de la requête

Articles Liés

Voir plus