Using Baidu Map API to implement regional map visualization and layer overlay in PHP-PHP Tutorial-php.cn

Using Baidu Map API to implement regional map visualization and layer overlay in PHP

WBOY

Release： 2023-07-30 12:34:01

Original

969 people have browsed it

Using Baidu Map API in PHP to realize the visualization and layer overlay of regional maps

Introduction:
With the development of the times, maps have become an indispensable part of our lives. In web development, the use of map API is also becoming more and more widespread. This article will introduce how to use PHP and Baidu Map API to visualize area maps and perform layer overlay operations.

1. Preparation work
Before we start, we need to prepare some things:

Baidu Map Developer Account: We need to register a developer account on the Baidu Map Open Platform , and create an application.
PHP server environment: Our code needs to run in a PHP server environment. Make sure you have completed setting up the environment.

2. Obtain the Baidu Map API key

Log in to the Baidu Map open platform and enter the console interface.
Create an application and fill in the application name, callback address and other relevant information.
After the creation is successful, you can find the Baidu Map API key we need in the application details page.

3. Create a map page

Create a PHP file, name it map.html, and add the following basic HTML structure:

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

Copy after login

Introduce the JavaScript library and style files of Baidu Map:

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

Copy after login

4. Draw the area map

In the JavaScript part, use the Baidu Map APIMap Class creates a map object:

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

Copy after login

Set the center point and zoom level of the map:

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

Copy after login

Add and draw an area:

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

Copy after login

5. Layer overlay
There are many ways to add map overlays. This article takes adding mouse drawing tools as an example:

In the JavaScript part, Create a mouse drawing tool and bind it to the map:

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 // 仅显示多边形绘制工具
        ]
    }
});

Copy after login

Listen to the drawing completion event and obtain the coordinates of the drawn area:

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

Copy after login

6. Complete code Example




    
    区域图可视化

Copy after login

Conclusion:
Through the above steps, we successfully used PHP and Baidu Map API to realize the visualization and layer overlay of the area map. You can adjust the style of the drawn area map or process the area according to your own needs. Wish you happy using it!

The above is the detailed content of Using Baidu Map API to implement regional map visualization and layer overlay in PHP. For more information, please follow other related articles on the PHP Chinese website!