How to Display Nearby POIs with PHP and Baidu Maps API
This step‑by‑step guide shows how to register a Baidu Maps developer account, create a PHP script that loads the BaiduMapAPI library, build a simple HTML page with a map container, retrieve nearby points of interest via the API, and display them using Ajax and the browser's geolocation.
Prerequisites
Obtain a Baidu Maps Open Platform API Key by registering a developer account and creating an application in the console. The key is required for all API calls.
Step 1: Create the PHP entry file
Create a file named poi.php. At the top of the file load the Baidu Maps SDK:
<?php
require_once 'BaiduMapAPI.php';
?>The BaiduMapAPI.php library provides classes and methods for interacting with Baidu Maps services.
Step 2: Build a minimal front‑end page
Inside the same poi.php file output a simple HTML document that contains a container for the map and POI list.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nearby POI Display</title>
<style>
#map-container { width:100%; height:500px; }
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>Step 3: Backend logic to retrieve POIs
The script reads longitude and latitude values supplied via GET parameters, creates a BaiduMapAPI instance with the API key, sets the map centre, and calls getPOIList to obtain nearby points of interest.
<?php
require_once 'BaiduMapAPI.php';
$api_key = 'YOUR_API_KEY'; // replace with the actual key
$longitude = $_GET['longitude'];
$latitude = $_GET['latitude'];
$map = new BaiduMapAPI($api_key);
$map->setCenter($longitude, $latitude);
// Retrieve POI list (the SDK returns an array of associative arrays)
$poi_list = $map->getPOIList($longitude, $latitude);
// Output each POI as plain text – the front‑end will inject this HTML
foreach ($poi_list as $poi) {
echo $poi['name'] . ' - ' . $poi['address'] . "<br>";
}
?>Step 4: Client‑side geolocation and Ajax request
Use the browser’s Geolocation API to obtain the user’s current coordinates, then send them to poi.php via an asynchronous XMLHttpRequest. When the response arrives, replace the content of #map-container with the returned POI list.
// Acquire user location
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();
});Step 5: Execution flow
Browser loads poi.php and renders the empty #map-container element.
JavaScript obtains the user’s latitude/longitude.
An Ajax GET request sends the coordinates to the same PHP script.
The PHP backend calls Baidu Maps’ getPOIList method, receives an array of POI objects, and echoes each name and address.
The Ajax callback injects the returned HTML into the container, displaying the nearby POIs.
This approach combines Baidu Maps API, PHP server‑side processing, and client‑side geolocation to provide a lightweight solution for dynamically showing points of interest around the user’s location.
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.