マップスケールディスプレイを実装する方法PHPでBaiduマップAPIの制御

M66 2025-09-22

導入

マップスケールは、マップアプリケーションで一般的な制御です。マップのスケール関係を表示するために使用され、ユーザーがズームレベルとマップの実際の距離との関係を理解するのに役立ちます。 PHP開発では、Baidu Map APIを組み合わせてMAPスケールの表示と制御を実現することは非常に実用的なスキルです。この記事では、Baidu Map APIを使用してPHP環境でこの機能を実装する方法を詳細に紹介します。

Baidu Map APIの紹介

Baidu Map APIを使用する場合、最初にHTMLページにBaidu MapのJavaScriptライブラリとマップスケールCSSスタイルのファイルを紹介する必要があります。 Baidu Map Open Platformによって提供されるCDNリンクから直接導入できます。

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>マップスケールの例</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=あなたのbaiduマップAPI鍵"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
</body>
</html>

マップを初期化し、スケールコントロールを設定します

次に、PHPコードを使用してマップを初期化し、マップにスケールコントロールを追加します。 Baidu Maps APIを介して、この関数を簡単に実装できます。マップを初期化してスケールコントロールを追加するためのサンプルコードを次に示します。

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>マップスケールの例</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=あなたのbaiduマップAPI鍵"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <script>
        var map = new BMap.Map("map"); // マップインスタンスを作成します
        var point = new BMap.Point(116.404, 39.915); // ポイント座標を作成します
        map.centerAndZoom(point, 15); // マップを初期化します，中心点とズームレベルを設定します

        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // スケールコントロールを作成します
        map.addControl(scaleControl); // スケールコントロールを追加します
    </script>
</body>
</html>

動的制御スケール制御ディスプレイと非表示

初期化中にスケールコントロールを追加することに加えて、ボタンを介したスケールコントロールの表示と非表示を動的に制御することもできます。これは、ボタンを介してスケールコントロールの表示ステータスを切り替える例です。

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>マップスケールの例</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=あなたのbaiduマップAPI鍵"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <button onclick="toggleScaleControl()">スイッチスケール</button>
    <script>
        var map = new BMap.Map("map"); // マップインスタンスを作成します
        var point = new BMap.Point(116.404, 39.915); // ポイント座標を作成します
        map.centerAndZoom(point, 15); // マップを初期化します，中心点とズームレベルを設定します

        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // スケールコントロールを作成します
        map.addControl(scaleControl); // スケールコントロールを追加します

        function toggleScaleControl() {
            if (scaleControl.isVisible()) {
                map.removeControl(scaleControl); // スケールコントロールを非表示にします
            } else {
                map.addControl(scaleControl); // スケール制御を表示します
            }
        }
    </script>
</body>
</html>

要約します

上記の例コードを使用して、PHP環境におけるBaidu Map APIのマップスケール制御の表示および制御機能を正常に実現できます。これは、ユーザーがマップズームのレベルをよりよく理解するのに役立つだけでなく、ユーザーエクスペリエンスを向上させるのにも役立ちます。開発者は、これらのコードを自由に変更および拡張することができます。

関連タグ:
API