Créez des bulles personnalisées pour la carte à l'aide de PHP et de l'API Amap-tutoriel php-php.cn

Créez des bulles personnalisées pour la carte à l'aide de PHP et de l'API Amap

PHPz

Libérer： 2023-08-01 08:42:01

original

1329 Les gens l'ont consulté

Utilisez PHP et l'API Amap pour créer des bulles personnalisées de la carte

Avec le développement d'Internet, les applications cartographiques deviennent de plus en plus importantes dans notre vie quotidienne. Sur de nombreux sites Web et applications, nous voyons souvent des cartes sur lesquelles sont marquées des informations utiles, telles que l'emplacement des magasins, les conditions de circulation, etc. Cet article explique comment utiliser PHP et l'API Amap pour créer des bulles personnalisées (également appelées marqueurs).

Tout d'abord, nous devons nous inscrire sur la plateforme de développement Amap et obtenir une clé API. Cette clé sera utilisée pour la communication entre notre application et l'API Amap.

Ensuite, nous devons préparer une page HTML de base, sur laquelle nous introduirons le code PHP pour gérer la génération et l'affichage des marqueurs cartographiques.

<!DOCTYPE html>
<html>
<head>
  <title>自定义气泡</title>
  <style>
    #map {
      width: 100%;
      height: 500px;
    }
  </style>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
</head>
<body>
  <h1>自定义气泡</h1>
  <div id="map"></div>

  <script>
    // 初始化地图
    var map = new AMap.Map('map', {
      center: [116.397428, 39.90923],
      zoom: 13
    });

    // 创建自定义标记
    <?php
      $locations = array(
        array('lat' => 39.908823, 'lng' => 116.397470, 'name' => '标记1', 'description' => '这是一个自定义标记'),
        array('lat' => 39.908834, 'lng' => 116.395456, 'name' => '标记2', 'description' => '这是另一个自定义标记')
      );

      foreach ($locations as $location) {
        echo "var marker = new AMap.Marker({
          position: new AMap.LngLat(" . $location['lng'] . "," . $location['lat'] . "),
          title: '" . $location['name'] . "',
          map: map
        });";

        echo "var infoWindow = new AMap.InfoWindow({
          content: '<h3>" . $location['name'] . "</h3><p>" . $location['description'] . "</p>'
        });";

        echo "marker.on('click', function() {
          infoWindow.open(map, marker.getPosition());
        });";
      }
    ?>
  </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous initialisons d'abord un objet cartographique via la fonction AMap.Map et spécifions les coordonnées centrales et le niveau de zoom de la carte. AMap.Map函数初始化了一个地图对象，并指定了地图的中心坐标和缩放级别。

然后，我们定义了一个包含自定义气泡信息的数组$locations。每个元素都包含经度、纬度、名称和描述信息。

接下来，我们使用foreach循环遍历数组中的元素，并为每个元素创建一个AMap.Marker对象。这个对象表示一个地图标记，我们通过设置位置、标题和地图对象来显示它。我们还创建了一个AMap.InfoWindow对象，用于显示气泡窗口的内容。

最后，我们通过将click事件监听器附加到每个标记上，使得当点击标记时，气泡窗口会在地图上打开。

在使用此代码之前，请确保将YOUR_API_KEY替换为您在高德地图开发者平台上获取的API密钥。

总结：

本文介绍了如何利用PHP和高德地图API创建自定义气泡。通过使用高德地图API提供的AMap.Marker和AMap.InfoWindow

Ensuite, nous définissons un tableau $locations contenant des informations sur les bulles personnalisées. Chaque élément contient des informations de longitude, de latitude, de nom et de description. 🎜🎜Ensuite, nous utilisons foreach pour parcourir les éléments du tableau et créer un objet AMap.Marker pour chaque élément. Cet objet représente un marqueur de carte, que nous affichons en définissant l'emplacement, le titre et l'objet cartographique. Nous avons également créé un objet AMap.InfoWindow pour afficher le contenu de la fenêtre bulle. 🎜🎜Enfin, nous attachons un écouteur d'événement click à chaque marqueur afin que lorsque l'on clique sur le marqueur, la fenêtre à bulles s'ouvre sur la carte. 🎜🎜Avant d'utiliser ce code, assurez-vous de remplacer YOUR_API_KEY par la clé API que vous avez obtenue sur la plateforme de développement Amap. 🎜🎜Résumé : 🎜🎜Cet article explique comment créer des bulles personnalisées à l'aide de PHP et de l'API Amap. En utilisant les classes AMap.Marker et AMap.InfoWindow fournies par l'API Amap, nous pouvons facilement créer des marqueurs personnalisés sur la carte et les afficher lorsque vous cliquez sur le marqueur. information. Cela nous permet d’ajouter très facilement des fonctions de carte interactive aux sites Web ou aux applications et d’améliorer l’expérience utilisateur. 🎜

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!