Build a POI Map with PHP & Baidu Maps API: Step-by-Step Guide
This tutorial walks you through registering a Baidu developer account, creating a PHP script, building a simple front‑end page, fetching nearby points of interest via the Baidu Maps API, and using Ajax to display the results on a map for enhanced navigation.
In the modern internet era, map navigation is essential, and displaying nearby points of interest (POI) in a project is a common requirement. This tutorial shows how to use PHP and the Baidu Maps API to implement POI display.
Step 1: Register a Baidu developer account and create an application
Sign up on Baidu Maps Open Platform, create an app, and obtain an API Key for later use.
Step 2: Create a PHP file and include the Baidu Maps API
Create poi.php and include the Baidu Maps library:
<?php
// Include Baidu Maps API
require_once 'BaiduMapAPI.php';
?>The require_once statement loads BaiduMapAPI.php, which provides the necessary functions.
Step 3: Build the front‑end page and map container
Add a simple HTML page with a div named map-container to hold the map:
<![CDATA[<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project POI Display</title>
<style>
#map-container{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>]]>Step 4: Write back‑end code to fetch and render POI
Retrieve longitude and latitude from the request, create a BaiduMap instance, set the center, call getPOIList, and output each POI’s name and address:
<?php
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>";
}
?>Step 5: Use Ajax to obtain the user’s location and call the back‑end
Employ the browser’s geolocation API and an XMLHttpRequest to send the coordinates to poi.php, then insert the response into the map container:
// Get user coordinates
navigator.geolocation.getCurrentPosition(function(position) {
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
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();
});Following these steps, you can integrate Baidu Maps into a PHP project to display nearby POI, enhancing navigation and user experience.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.