Créez des marqueurs de carte interactifs à l'aide de PHP et de l'API Amap-tutoriel php-php.cn

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

王林

Libérer： 2023-07-31 17:08:01

original

1279 Les gens l'ont consulté

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 :

Enregistrez un compte développeur Amap.
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>

Copier après la connexion

Analyse :

En introduisant les liens de ressources de la bibliothèque Amap et jQuery, nous pouvons utiliser les API associées dans la page.
Créez un objet cartographique et définissez le niveau de zoom et les coordonnées du point central.
Ajout de contrôles de carte, y compris la barre d'outils de zoom.
Écoutez l'événement de clic de la carte et obtenez les coordonnées de latitude et de longitude de l'emplacement du clic.
Crée un objet marqueur et l'ajoute à la carte.
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

dans le code par votre propre clé de développeur. YOUR_KEY

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!