Baidu Map API を使用して PHP で地域地図の視覚化とレイヤーオーバーレイを実装する-PHPチュートリアル-php.cn

Baidu Map API を使用して PHP で地域地図の視覚化とレイヤーオーバーレイを実装する

WBOY

リリース： 2023-07-30 12:34:01

オリジナル

1053 人が閲覧しました

PHP で Baidu Map API を使用して、地域地図の視覚化とレイヤーオーバーレイを実現します。

はじめに:
時代の発展に伴い、地図は私たちの生活に欠かせないものになりました。 Web 開発では、マップ API の使用もますます普及しています。この記事では、PHP と Baidu Map API を使用してエリアマップを視覚化し、レイヤーオーバーレイ操作を実行する方法を紹介します。

1. 準備作業
始める前に、いくつか準備する必要があります:

Baidu Map 開発者アカウント: Baidu Map Open に開発者アカウントを登録する必要があります。プラットフォーム、アプリケーションを作成します。
PHP サーバー環境: コードは PHP サーバー環境で実行する必要があります。環境のセットアップが完了していることを確認してください。

2. Baidu Map API キーを取得します

Baidu Map オープンプラットフォームにログインし、コンソールインターフェイスに入ります。
アプリケーションを作成し、アプリケーション名、コールバックアドレス、その他の関連情報を入力します。
作成が成功すると、アプリケーションの詳細ページで必要な Baidu Map API キーを見つけることができます。

3. マップページの作成

PHP ファイルを作成し、map.html という名前を付け、次の基本的な HTML 構造を追加します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>区域图可视化</title>
    <style type="text/css">
        /* 设置地图容器的宽高 */
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

ログイン後にコピー

Baidu Map の JavaScript ライブラリとスタイルファイルを紹介します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>区域图可视化</title>
    <style type="text/css">
        /* 设置地图容器的宽高 */
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

ログイン後にコピー

4. エリアマップを描画します

JavaScript 部分では、Baidu を使用します。 Map APIMap クラスはマップオブジェクトを作成します:

var map = new BMap.Map("map");

ログイン後にコピー

map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);

ログイン後にコピー

var polygon = new BMap.Polygon([
    new BMap.Point(116.387112,39.920977),
    new BMap.Point(116.385243,39.913063),
    new BMap.Point(116.394226,39.917988)
], {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5}); // 设置区域的样式
map.addOverlay(polygon);

ログイン後にコピー

マップオーバーレイを追加するにはさまざまな方法があります。この記事では例としてマウス描画ツールの追加を取り上げます:

JavaScript 部分で、マウス描画ツールを作成し、マップにバインドします。

var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: true, // 是否开启绘制模式
    enableDrawingTool: true, // 是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, // 工具栏的位置
        offset: new BMap.Size(5, 5), // 工具栏的偏移量
        drawingModes: [
            BMAP_DRAWING_POLYGON // 仅显示多边形绘制工具
        ]
    }
});

ログイン後にコピー

描画完了イベントをリッスンして、描画領域の座標を取得します。

drawingManager.addEventListener('polygoncomplete', function(polygon) {
    var overlay = polygon.getPath(); // 获取绘制的区域坐标
    // 执行其他操作，比如将坐标传给后端进行处理等
});

ログイン後にコピー