Generating and Displaying Static Maps with PHP and Baidu Map API

This article explains how to set up the environment, import the Baidu Map API, create map containers, generate static map URLs using PHP, and display the resulting map and markers on a web page, providing step‑by‑step code examples for developers.

php Courses
php Courses
php Courses
Generating and Displaying Static Maps with PHP and Baidu Map API

1. Overview

In many web applications, you need to generate and display maps based on user requirements. This article introduces how to use PHP and Baidu Map API to generate and display static maps, allowing flexible control over size, viewport, markers, etc.

2. Environment Preparation

Before starting, ensure PHP and a web server are installed, and obtain a Baidu Map API key by registering on Baidu Open Platform.

3. Using Baidu Map API to Generate Static Maps

1. Import Baidu Map API

First, include the Baidu Map API JavaScript file in the PHP page:

<script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_KEY"></script>

Replace "YOUR_KEY" with your actual Baidu Map API key.

2. Create Map Container

Next, add an HTML element to hold the map:

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

3. Generate Static Map

Use the BMap.Map class to create a map instance, set the center point and zoom level:

<script>
    // Create map instance
    var map = new BMap.Map("map");
    // Set center point and zoom
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
</script>

Replace the latitude and longitude with the desired coordinates.

4. Add Marker

If you need a marker, use BMap.Marker:

<script>
    // Add marker
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
</script>

Place this code after the map creation code.

4. PHP Generation of Static Map

1. Get Baidu Static Map API URL

Construct the URL with required parameters:

$ak = 'YOUR_KEY';
$center = '116.404, 39.915';
$zoom = 15;
$width = 500;
$height = 300;
$url = 'http://api.map.baidu.com/staticimage/v2?ak=' . $ak . '¢er=' . $center . '&zoom=' . $zoom . '&width=' . $width . '&height=' . $height;

Replace "YOUR_KEY" with your API key and adjust parameters as needed.

2. Generate and Display Static Map

Echo an

tag with the generated URL: echo '<img src="' . $url . '">'; Insert this code at the appropriate place in your PHP page to display the static map.

The example demonstrates how to generate and display a static map using PHP and Baidu Map API, and you can adjust parameters to meet different requirements.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

frontendWeb DevelopmentPHPstatic map
php Courses
Written by

php Courses

php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.