ホームページ  >  記事  >  バックエンド開発  >  PHP での Baidu Map API のアプリケーション例とチュートリアル

PHP での Baidu Map API のアプリケーション例とチュートリアル

WBOY
WBOYオリジナル
2023-08-01 10:45:121509ブラウズ

PHP での Baidu Map API のアプリケーション例とチュートリアル

Baidu Map API は、Baidu が提供する無料の地図開発インターフェイスであり、独自の Web サイトやアプリケーション上で簡単に地図を表示および表示できます。その他の機能。この記事では、PHP で Baidu Map API を使用する方法といくつかの実用的なアプリケーション例を紹介します。

1. Baidu Map API の基本的な使用方法

  1. Baidu Map 開発者アカウントを登録し、アプリケーションを作成します

まず、Baidu Map プラットフォームを開く必要がありますWebサイトで開発者アカウントを登録し、アプリケーションを作成します。アプリケーションを作成すると、後続のコードで使用される API キー (ak) を取得します。

  1. Baidu Map API の JavaScript ライブラリの紹介

php ファイルでは、Baidu Map API の JavaScript ライブラリを導入する必要があります。次のコードを使用できます。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API密钥"></script>

このうち、API キーは独自のキーに置き換える必要があります。

  1. マップ コンテナーの作成

次のコードを使用して、Web ページにマップ コンテナーを作成します。

<div id="map" style="width: 100%; height: 400px;"></div>

その中で、次の div 要素ID "map" マップを配置するために使用されます。

  1. マップの初期化と中心点の設定

JavaScript コードでは、次のコードを使用してマップを初期化し、マップの中心点を設定する必要があります。 :

<script>
    // 创建Map实例
    var map = new BMap.Map("map");
    // 设置中心点坐标
    var point = new BMap.Point(116.404, 39.915);
    // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
</script>

このうち、116.404は経度、39.915は緯度を示し、マップレベル15は表示レベルがストリートレベルであることを示します。

  1. ラベルの追加

次のコードを使用して、地図上にラベルを追加できます:

<script>
    // 创建标注点
    var marker = new BMap.Marker(point);
    // 添加标注点到地图上
    map.addOverlay(marker);
</script>

上記のコードを実行した後、次のことができます。地図上のマークされたポイントを参照してください。

2. PHP での Baidu Map API のアプリケーション例

以下は、PHP で Baidu Map API を使用する方法を示す簡単な例です。

店舗の場所を Web ページに表示し、地図上でマークするという要件があるとします。

ここでは、参考のために次の簡単な手順を示します:

  1. データベース テーブルの作成

まず、Stores の店舗の場所のデータベース テーブルを作成する必要があります。情報。テーブル構造は次のコードを参照できます。

CREATE TABLE `store` (
  `id` INT UNSIGNED AUTO_INCREMENT,
  `name` VARCHAR(50) NOT NULL,
  `address` VARCHAR(100) NOT NULL,
  `longitude` DOUBLE NOT NULL,
  `latitude` DOUBLE NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8;
  1. 店舗情報をデータベースに追加する

店舗の場所情報をデータベースに追加するには、次のコードを使用できます。コード:

INSERT INTO `store` (`name`, `address`, `longitude`, `latitude`) VALUES
('商店A', '地址A', 116.404, 39.915),
('商店B', '地址B', 116.404, 39.915),
('商店C', '地址C', 116.404, 39.915);
  1. PHP コード例

データベースから店舗情報を読み取り、地図上にマークするための PHP コードを記述します。次のコードを使用します:

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "test";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 从数据库中读取商店信息
$sql = "SELECT * FROM store";
$result = $conn->query($sql);

// 输出商店信息到JavaScript数组
$stores = array();
while ($row = $result->fetch_assoc()) {
    $stores[] = $row;
}
?>

<script>
    var map = new BMap.Map("map");
    var point = new BMap.Point(<?php echo $stores[0]['longitude']; ?>, <?php echo $stores[0]['latitude']; ?>);
    map.centerAndZoom(point, 15);

    <?php foreach ($stores as $store): ?>
    var storePoint = new BMap.Point(<?php echo $store['longitude']; ?>, <?php echo $store['latitude']; ?>);
    var storeMarker = new BMap.Marker(storePoint);
    map.addOverlay(storeMarker);
    <?php endforeach; ?>
</script>

上記を置き換え コードはphpファイルとして保存されており、ファイルを実行するとWebページ上に地図が表示され、店舗の位置が表示されます。

上記の例を通じて、PHP で Baidu Map API を使用し、いくつかの簡単な関数を実装する方法を確認できます。必要に応じて、Baidu Map API の他の機能をさらに学習および探索し、独自のプロジェクトに適用できます。この記事があなたのお役に立てば幸いです。

以上がPHP での Baidu Map API のアプリケーション例とチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。