Tutoriel sur l'utilisation de PHP et de l'API Baidu Map pour afficher les points d'intérêt autour du projet
À l'ère d'Internet d'aujourd'hui, la navigation cartographique est devenue un élément indispensable de la vie des gens. Comment utiliser des cartes pour afficher les points d'intérêt (POI) environnants dans notre projet est également une exigence fonctionnelle importante. Cet article prendra l'utilisation de PHP et de l'API Baidu Map pour afficher les points d'intérêt autour du projet à titre d'exemple pour présenter en détail la méthode de mise en œuvre spécifique.
Étape 1 : Enregistrez un compte de développeur Baidu et créez une application
Tout d'abord, nous devons enregistrer un compte de développeur sur la plateforme de développement Baidu Maps. Une fois l'enregistrement terminé, créez une application dans la console de Baidu Map Open Platform et obtenez la clé API correspondante. Cette clé API sera utilisée dans le développement ultérieur.
Étape 2 : Créez un fichier PHP et introduisez l'API Baidu Map
Ensuite, nous devons créer un fichier PHP, tel que poi.php, pour afficher les points d'intérêt environnants. Dans le fichier poi.php, nous devons d'abord introduire les fichiers de bibliothèque pertinents de l'API Baidu Map. L'exemple de code spécifique est le suivant :
<?php
// 引入百度地图API
require_once 'BaiduMapAPI.php';
?>
Copier après la connexion
Dans le code, nous utilisons la fonction require_once pour introduire BaiduMapAPI.php, le fichier de bibliothèque principal de l'API Baidu Map, dans notre projet. Ce fichier de bibliothèque fournira les fonctions et interfaces pertinentes requises par Baidu Maps.
Étape 3 : Écrivez la page frontale et le conteneur d'affichage de la carte
Dans le fichier poi.php, nous devons écrire le code de la page frontale et du conteneur d'affichage de la carte. L'exemple de code spécifique est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>项目周边兴趣点展示</title>
<style type="text/css">
/* 地图展示容器的样式 */
#map-container{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>Copier après la connexion
Dans ce code, nous créons une simple page HTML, qui contient un élément div avec l'identifiant "map-container" comme conteneur d'affichage de la carte. Ce conteneur sera utilisé pour afficher des informations sur la carte et les points d’intérêt.
Étape 4 : Écrivez du code back-end pour obtenir et afficher des points d'intérêt
Nous pouvons maintenant commencer à écrire du code back-end pour obtenir et afficher des informations sur les points d'intérêt environnants via l'API Baidu Map. L'exemple de code spécifique est le suivant :
<?php
// 引入百度地图API
require_once 'BaiduMapAPI.php';
// 获取经纬度
$longitude = $_GET['longitude'];
$latitude = $_GET['latitude'];
// 创建百度地图实例
$map = new BaiduMapAPI($api_key);
// 设置中心点位置
$map->setCenter($longitude, $latitude);
// 获取周边兴趣点
$poi_list = $map->getPOIList($longitude, $latitude);
// 输出兴趣点信息
foreach($poi_list as $poi){
echo $poi['name'] . ' - ' . $poi['address'] . "<br>";
}
?>Copier après la connexion
Dans ce code, nous obtenons d'abord les informations de latitude et de longitude transmises par le front-end. Ensuite, en créant une instance de carte Baidu et en définissant l'emplacement du point central, nous pouvons obtenir des informations sur les points d'intérêt environnants en appelant la fonction getPOIList. Enfin, nous affichons les noms et adresses des points d’intérêt en les parcourant en boucle.
Étape 5 : Utilisez Ajax pour obtenir la localisation géographique et appeler le code back-end
Enfin, nous pouvons utiliser Ajax pour obtenir les informations de localisation géographique de l'utilisateur et transmettre ces informations au code back-end pour obtenir l'affichage des environs points d'intérêt. L'exemple de code spécifique est le suivant :
// 获取用户经纬度信息
navigator.geolocation.getCurrentPosition(function(position) {
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
// 发送Ajax请求
var xhr = new XMLHttpRequest();
xhr.open("GET", "poi.php?longitude=" + longitude + "&latitude=" + latitude, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取到兴趣点信息后，将其展示在页面上
document.getElementById("map-container").innerHTML = xhr.responseText;
}
};
xhr.send();
});Copier après la connexion
Dans ce code, nous utilisons la fonction navigator.geolocation.getCurrentPosition pour obtenir les informations de latitude et de longitude de l'utilisateur. Ensuite, nous transportons les informations de latitude et de longitude dans l'URL en créant un objet XMLHttpRequest et en envoyant une requête GET. Lorsque le serveur renvoie la réponse, nous pouvons afficher les informations sur le point d'intérêt sur la page en définissant l'attribut innerHTML de l'élément map-container.
Jusqu'à présent, nous avons terminé le tutoriel sur l'utilisation de PHP et de l'API Baidu Map pour afficher les points d'intérêt autour du projet. En suivant les étapes ci-dessus, nous pouvons facilement afficher les points d'intérêt environnants dans nos projets pour offrir aux utilisateurs une meilleure expérience de navigation et de positionnement. J'espère que cet article sera utile à tout le monde !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
