How to Display Nearby Points of Interest Using PHP and Baidu Maps API
This tutorial explains step‑by‑step how to register a Baidu Maps developer account, create a PHP script, build a simple HTML page, retrieve geographic coordinates via Ajax, call the Baidu Maps API to fetch surrounding POIs, and render them on the map for a web project.
In today's internet era, map navigation is essential, and displaying nearby points of interest (POI) in a project is a common requirement. This guide demonstrates how to implement POI display using PHP and the Baidu Maps API.
Step 1: Register a Baidu Developer Account and Create an Application
Sign up on the Baidu Maps Open Platform, create a new application, and obtain an API Key, which will be used in subsequent development.
Step 2: Create a PHP File and Include the Baidu Maps API
Create a PHP file (e.g., poi.php ) and include the Baidu Maps API library:
<?php
// Introduce Baidu Maps API
require_once 'BaiduMapAPI.php';
?>The require_once statement loads the BaiduMapAPI.php library, providing the necessary functions and interfaces.
Step 3: Write the Front‑End Page and Map Container
In poi.php , add a simple HTML page with a div that will hold the map:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project POI Display</title>
<style type="text/css">
/* Map container style */
#map-container{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>The #map-container div will be used to render the map and POI information.
Step 4: Write Backend Code to Retrieve and Display POIs
Use the Baidu Maps API to get POI data based on longitude and latitude passed from the front end:
<?php
// Introduce Baidu Maps API
require_once 'BaiduMapAPI.php';
// Get coordinates
$longitude = $_GET['longitude'];
$latitude = $_GET['latitude'];
// Create Baidu Map instance
$map = new BaiduMapAPI($api_key);
// Set center point
$map->setCenter($longitude, $latitude);
// Get surrounding POIs
$poi_list = $map->getPOIList($longitude, $latitude);
// Output POI information
foreach($poi_list as $poi){
echo $poi['name'] . ' - ' . $poi['address'] . "
";
}
?>The script obtains the coordinates, creates a map instance, sets the center, calls getPOIList to fetch nearby POIs, and echoes each POI’s name and address.
Step 5: Use Ajax to Get Geolocation and Call Backend
Retrieve the user’s location with the Geolocation API and send it to poi.php via an Ajax request:
// Get user coordinates
navigator.geolocation.getCurrentPosition(function(position) {
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
// Send Ajax request
var xhr = new XMLHttpRequest();
xhr.open("GET", "poi.php?longitude=" + longitude + "&latitude=" + latitude, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Display POI information in the map container
document.getElementById("map-container").innerHTML = xhr.responseText;
}
};
xhr.send();
});The navigator.geolocation.getCurrentPosition function obtains the user’s latitude and longitude, and the XMLHttpRequest sends them to the PHP backend. The response (POI list) is then inserted into the #map-container element.
By following these steps, you can integrate Baidu Maps into a PHP project to display nearby points of interest, providing users with enhanced navigation and location experiences.
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.