PHP에서 Baidu Map API를 사용하여 지역 지도 시각화 및 레이어 오버레이 구현-PHP 튜토리얼-php.cn

PHP에서 Baidu Map API를 사용하여 지역 지도 시각화 및 레이어 오버레이 구현

WBOY

풀어 주다： 2023-07-30 12:34:01

원래의

978명이 탐색했습니다.

PHP에서 Baidu Map API를 사용하여 지역 지도의 시각화 및 레이어 오버레이를 실현합니다.

소개:
시대의 발전과 함께 지도는 우리 삶에 없어서는 안 될 부분이 되었습니다. 웹 개발에서도 지도 API의 사용이 점점 더 널리 퍼지고 있습니다. 이 기사에서는 PHP 및 Baidu Map API를 사용하여 지역 지도를 시각화하고 레이어 오버레이 작업을 수행하는 방법을 소개합니다.

1. 준비
시작하기 전에 몇 가지 준비가 필요합니다.

Baidu 지도 개발자 계정: Baidu 지도 오픈 플랫폼에 개발자 계정을 등록하고 애플리케이션을 만들어야 합니다.
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 API의 Map 클래스를 사용하여 지도 개체를 만듭니다.

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

로그인 후 복사

5. 레이어 오버레이
지도 오버레이를 추가하는 방법에는 여러 가지가 있습니다. 이 기사에서는 마우스 그리기 도구를 추가하는 방법을 예로 들어 보겠습니다.

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(); // 获取绘制的区域坐标
    // 执行其他操作，比如将坐标传给后端进行处理等
});

로그인 후 복사

6. 전체 코드 예제