Home  >  Article  >  Backend Development  >  Application examples and tutorials of Baidu Map API in PHP

Application examples and tutorials of Baidu Map API in PHP

WBOY
WBOYOriginal
2023-08-01 10:45:121467browse

Application examples and tutorials of Baidu Map API in PHP

Baidu Map API is a free map development interface launched by Baidu, which can easily display and display maps on your own website or application. Search, navigation and other functions. This article will introduce how to use Baidu Map API in PHP and provide some practical application examples.

1. Basic use of Baidu Map API

  1. Register Baidu Map developer account and create applications

First, we need to open the Baidu Map platform Register a developer account on the website and create an application. When creating an application, you will get an API key (ak), which will be used in the subsequent code.

  1. Introducing the JavaScript library of Baidu Map API

In the php file, we need to introduce the JavaScript library of Baidu Map API, you can use the following code:

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

Among them, the API key needs to be replaced with your own key.

  1. Create a map container

Use the following code to create a map container in a web page:

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

Among them, the div element with the id "map" Used to place maps.

  1. Initialize the map and set the center point

In the JavaScript code, we need to initialize the map and set the center point of the map, using the following code:

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

Among them, 116.404 indicates longitude, 39.915 indicates latitude, and a map level of 15 indicates that the display level is street level.

  1. Add a label

You can use the following code to add a label on the map:

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

After running the above code, you can see it on the map to a marked point.

2. Application Example of Baidu Map API in PHP

The following is a simple example to illustrate how to use Baidu Map API in PHP.

Suppose we have a requirement: display the location of the store on a web page and mark it on the map.

Here are the following simple steps for reference:

  1. Create a database table

First, we need to create a database table for Stores store location information. The table structure can refer to the following code:

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. Add store information to the database

To add some store location information in the database, you can use the following code:

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 code example

Write PHP code to read store information from the database and mark it on the map, use the following code:

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

Replace the above The code is saved as a php file. Run the file and you can see the map on the web page and display the location of the store.

Through the above examples, we can see how to use Baidu Map API in PHP and implement some simple functions. You can further learn and explore other functions of Baidu Map API as needed, and apply them in your own projects. Hope this article can be helpful to you.

The above is the detailed content of Application examples and tutorials of Baidu Map API in PHP. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn