How to Implement Map Scale Display and Control Using Baidu Map API in PHP

M66 2025-09-22

Introduction

Map scale is a common control in map applications that shows the proportional relationship of the map, helping users understand the zoom level and the real-world distance. In PHP development, combining Baidu Map API to implement map scale display and control is a highly practical skill. This article will explain in detail how to use Baidu Map API in a PHP environment to achieve this functionality.

Include Baidu Map API

When using Baidu Map API, the first step is to include the Baidu Map JavaScript library and the CSS file for the map scale control in the HTML page. You can directly use the CDN links provided by Baidu Map Platform.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Map Scale Example</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Your_Baidu_Map_API_Key"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
</body>
</html>

Initialize Map and Set Scale Control

Next, we use PHP code to initialize the map and add the scale control to the map. With Baidu Map API, it’s easy to implement this feature. Below is an example code for initializing the map and adding the scale control:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Map Scale Example</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Your_Baidu_Map_API_Key"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <script>
        var map = new BMap.Map("map"); // Create map instance
        var point = new BMap.Point(116.404, 39.915); // Create point coordinates
        map.centerAndZoom(point, 15); // Initialize map with center point and zoom level

        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // Create scale control
        map.addControl(scaleControl); // Add scale control to the map
    </script>
</body>
</html>

Control Scale Control Visibility Dynamically

In addition to adding the scale control during initialization, you can also dynamically control the display and hiding of the scale control by clicking a button. Below is an example where a button toggles the visibility of the scale control:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Map Scale Example</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Your_Baidu_Map_API_Key"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <button onclick="toggleScaleControl()">Toggle Scale</button>
    <script>
        var map = new BMap.Map("map"); // Create map instance
        var point = new BMap.Point(116.404, 39.915); // Create point coordinates
        map.centerAndZoom(point, 15); // Initialize map with center point and zoom level

        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // Create scale control
        map.addControl(scaleControl); // Add scale control to the map

        function toggleScaleControl() {
            if (scaleControl.isVisible()) {
                map.removeControl(scaleControl); // Hide scale control
            } else {
                map.addControl(scaleControl); // Show scale control
            }
        }
    </script>
</body>
</html>

Conclusion

Through the example code above, we can successfully implement the map scale control display and toggle feature using Baidu Map API in a PHP environment. This feature not only helps users understand map zoom levels but also enhances user experience. Developers can freely modify and extend the code based on their needs.

Related Tags:
API