Créer une application cartographique à l'aide de PHP et de l'API Google Maps

Dans cet article, nous présenterons comment utiliser PHP et l'API Google Maps pour créer une application cartographique simple. Cette application utilisera l'API Google Maps pour afficher une carte et PHP pour charger dynamiquement des marqueurs sur la carte.

Avant de commencer, vous devez disposer d'un compte Google et créer une clé API. Dans votre console Google Cloud, activez l'API Maps JavaScript et l'API de géocodage.

1. Configurer l'API Google Maps

Après avoir obtenu la clé API depuis la console Google Cloud, intégrez-la dans votre fichier HTML :

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

2. Créez la carte

Pour utiliser la carte dans votre application, un élément HTML doit à créer puis à transmettre à l'API Google Maps. Par exemple, pour créer une carte dans un élément avec l'identifiant "map" :

<div id="map"></div>

Ensuite, initialisez la carte à l'aide du code JavaScript :

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });
}

Cela créera une carte d'une hauteur de 0, puisque nous n'avons pas ajouté de marqueur de carte encore.

3. Ajouter des marqueurs de carte

Pour ajouter des marqueurs à la carte, vous devez spécifier la longitude et la latitude de chaque marqueur et les transmettre à l'API Google Maps. Par exemple :

// 经度、纬度
const locations = [
  { lat: 37.7749, lng: -122.4194 },
  { lat: 37.7749, lng: -122.4294 },
  { lat: 37.7849, lng: -122.4194 },
  { lat: 37.7849, lng: -122.4294 }
];

// 创建标记并添加到地图上
locations.forEach(location => {
  new google.maps.Marker({
    position: location,
    map: map
  });
});

Cela ajoutera quatre marqueurs à la carte.

4. Chargement dynamique des balises

Si vous souhaitez charger dynamiquement des balises à partir d'une base de données ou d'une API en fonction de conditions spécifiques, vous pouvez utiliser PHP. Tout d'abord, écrivez un script PHP qui interroge les données et renvoie un tableau JSON contenant la longitude et la latitude de chaque marqueur :

<?php
// 连接到数据库或API
$data = [
  ['lat' => 37.7749, 'lng' => -122.4194],
  ['lat' => 37.7749, 'lng' => -122.4294],
  ['lat' => 37.7849, 'lng' => -122.4194],
  ['lat' => 37.7849, 'lng' => -122.4294]
];

header('Content-Type: application/json');
echo json_encode($data);
?>

Ensuite, utilisez jQuery en JavaScript pour obtenir ce script et transmettre ses données à l'API Google Maps :

// 获取地图数据
$.get("get_map_data.php", function(data) {
  // 创建标记并添加到地图上
  data.forEach(location => {
    new google.maps.Marker({
      position: location,
      map: map
    });
  });
});

Désormais, le balisage sera chargé dynamiquement à chaque chargement de la page.

5. Localisation des adresses et géocodage inversé

En plus d'ajouter des marqueurs, l'API Google Maps offre de nombreuses autres fonctionnalités. À l’aide du ciblage d’adresses et du géocodage inversé, vous pouvez afficher l’emplacement d’un emplacement spécifique sur une carte ou renvoyer le nom d’un emplacement spécifique en fonction de la longitude et de la latitude.

Par exemple, utilisez le géocodage inversé pour afficher l'adresse du point central de la carte au-dessus de la carte :

let map;
let geocoder;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });

  geocoder = new google.maps.Geocoder();

  // 将地图中心点的地址显示在地图上方
  geocoder.geocode({ location: map.getCenter() }, function(results, status) {
    if (status === "OK") {
      if (results[0]) {
        $("#location").text(results[0].formatted_address);
      } else {
        $("#location").text("No address found");
      }
    } else {
      $("#location").text("Geocoder failed due to: " + status);
    }
  });
}

Cela affichera l'adresse du point central de la carte dans un élément avec l'identifiant « location ».

6. Résumé

En utilisant PHP et l'API Google Maps, nous avons créé une application cartographique simple qui peut charger dynamiquement des marqueurs sur la carte, afficher des adresses et profiter d'autres fonctionnalités fournies par l'API. Dans les applications pratiques, vous pouvez utiliser des technologies et des API plus avancées pour créer des applications cartographiques plus puissantes.

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!