Contoh aplikasi dan tutorial API Peta Baidu dalam PHP

Contoh dan tutorial aplikasi API Peta Baidu dalam PHP

API Peta Baidu ialah antara muka pembangunan peta percuma yang dilancarkan oleh Baidu, yang boleh melaksanakan paparan peta, carian, navigasi dan fungsi lain dengan mudah dalam tapak web atau aplikasi anda sendiri. Artikel ini akan memperkenalkan cara menggunakan API Peta Baidu dalam PHP dan menyediakan beberapa contoh aplikasi praktikal.

1. Penggunaan asas API Peta Baidu

1. Daftar akaun pembangun Baidu Map dan buat aplikasi

Pertama, kita perlu mendaftar akaun pembangun pada platform terbuka Peta Baidu dan buat aplikasi. Apabila membuat aplikasi, anda akan mendapat kunci API (ak), yang akan digunakan dalam kod seterusnya.

2. Perkenalkan perpustakaan JavaScript Baidu Map API

Dalam fail php, kami perlu memperkenalkan perpustakaan JavaScript Baidu Map API, anda boleh menggunakan kod berikut:

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

Antaranya, kunci API perlu diganti dengan kunci anda sendiri.

3. Buat bekas peta

Gunakan kod berikut untuk mencipta bekas peta dalam halaman web:

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

Antaranya, elemen div dengan id "peta" digunakan untuk meletakkan peta.

4. Inisialisasikan peta dan tetapkan titik tengah

Dalam kod JavaScript, kita perlu memulakan peta dan menetapkan titik tengah peta, gunakan kod berikut:

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

Di mana, 116.404 mewakili longitud, 39.915 latitud, dan peta aras 15 mewakili Aras paparan ialah aras jalan.

5. Tambah label

Anda boleh menggunakan kod berikut untuk menambah label pada peta:

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

Selepas menjalankan kod di atas, anda boleh melihat titik label pada peta.

2. Contoh aplikasi API Peta Baidu dalam PHP

Berikut ialah contoh mudah untuk menggambarkan cara menggunakan API Peta Baidu dalam PHP.

Katakan kita mempunyai keperluan: paparkan lokasi kedai pada halaman web dan tandakannya pada peta.

Berikut adalah langkah mudah berikut untuk rujukan:

1. Buat jadual pangkalan data

Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan maklumat lokasi kedai. Struktur jadual boleh merujuk kepada kod berikut:

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;

2. Tambah maklumat kedai ke pangkalan data

Untuk menambah beberapa maklumat lokasi kedai dalam pangkalan data, anda boleh menggunakan kod berikut:

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);

3. contoh kod PHP

Tulis kod PHP daripada pangkalan data Untuk membaca maklumat kedai dan tandakannya pada peta, gunakan kod berikut:

<?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>

Simpan kod di atas sebagai fail php, jalankan fail, anda boleh melihat peta pada halaman web dan paparan lokasi kedai.

Melalui contoh di atas, kita dapat melihat cara menggunakan API Peta Baidu dalam PHP dan melaksanakan beberapa fungsi mudah. Anda boleh mempelajari dan meneroka fungsi lain API Peta Baidu mengikut keperluan, dan menggunakannya dalam projek anda sendiri. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Contoh aplikasi dan tutorial API Peta Baidu dalam PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!