JS 및 Baidu Maps를 사용하여 지도 운전 경로 계획 기능을 구현하는 방법-JS 튜토리얼-php.cn

JS 및 Baidu Maps를 사용하여 지도 운전 경로 계획 기능을 구현하는 방법

WBOY

풀어 주다： 2023-11-21 11:06:11

원래의

1507명이 탐색했습니다.

JS 및 Baidu Maps를 사용하여 지도 운전 경로 계획 기능을 구현하는 방법

JS 및 Baidu Maps를 사용하여 지도 운전 경로 계획 기능 구현하는 방법

지속적인 기술 발전으로 지도 운전 경로 계획은 우리 일상 생활에 필수적인 기능 중 하나가 되었습니다. 지도 주행 경로 계획을 구현하기 위해 JS 및 Baidu Maps를 사용하여 이 기능을 구현할 수 있습니다. 이 기사에서는 JS 및 Baidu Maps를 사용하여 지도 주행 경로 계획 기능을 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비
코드 작성을 시작하기 전에 필요한 작업을 준비해야 합니다.

바이두 지도 키: 바이두 지도 오픈 플랫폼에서 키를 신청하고 적어두면 나중에 사용됩니다.
Baidu Map API 도입: HTML 파일에 Baidu Map의 JS 파일을 도입합니다. 예:
```
<script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR-KEY"></script>
```
로그인 후 복사
그 중 YOUR-KEY는 신청한 키로 교체해야 합니다.

2. 지도 만들기
먼저 지도 컨테이너를 만들어 페이지에 표시해야 합니다. HTML 코드는 다음과 같습니다.

<div id="map"></div>

로그인 후 복사

그런 다음 JS에 다음 코드를 추가하여 지도를 만듭니다.

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

로그인 후 복사

여기서 "map"은 지도 컨테이너의 ID입니다. 여기서는 기본 지도를 만들고 중심점을 설정합니다. 지도 수준 확대.

3. 운전 경로 계획 기능 추가
다음으로 운전 경로 계획 기능을 추가해야 합니다. 다음은 코드 예시입니다.

// 创建DrivingRoute实例，使用自动获取用户位置的定位
var driving = new BMap.DrivingRoute(map, {onSearchComplete: drivingComplete});
driving.setLocation("北京");

// 规划行车路线
driving.search("北京市海淀区上地十街10号", "北京市朝阳区东直门外大街1号");

// 定义行车路线规划完成时的回调函数
function drivingComplete(results) {
  if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
    var plan = results.getPlan(0);
    var route = plan.getRoute(0);
    var distance = route.getDistance(false) / 1000; // 单位为千米
    var duration = route.getDuration(false) / 60; // 单位为分钟
    var steps = route.getSteps();
    var polyline = new BMap.Polyline(route.getPath());
    
    // 在地图上显示行车路线
    map.addOverlay(polyline);
    
    // 输出行车路线的距离和预计时间
    console.log("距离：" + distance + "千米");
    console.log("预计时间：" + duration + "分钟");

    // 输出行车路线的每个步骤
    for (var i = 0; i < steps.length; i++) {
      console.log(steps[i].getDescription());
    }
  }
}

로그인 후 복사

위 코드에서는 DrivingRoute 인스턴스를 생성하고 지도 컨테이너와 콜백 함수를 설정했습니다. 그런 다음 검색 방법을 사용하여 주행 경로를 계획합니다. 운전 경로 계획이 완료되면 콜백 기능이 실행됩니다. 콜백 함수에서 운전 경로의 구체적인 정보를 얻어서 지도에 운전 경로를 표시할 수 있습니다.

4. 전체 샘플 코드
다음은 전체 샘플 코드입니다. HTML 파일에 복사하여 실행할 수 있습니다.




  
  地图行车路线规划示例



  

  <script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR-KEY"></script>
  <script>
    var map = new BMap.Map("map");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    var driving = new BMap.DrivingRoute(map, {onSearchComplete: drivingComplete});
    driving.setLocation("北京");
    driving.search("北京市海淀区上地十街10号", "北京市朝阳区东直门外大街1号");

    function drivingComplete(results) {
      if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
        var plan = results.getPlan(0);
        var route = plan.getRoute(0);
        var distance = route.getDistance(false) / 1000; // 单位为千米
        var duration = route.getDuration(false) / 60; // 单位为分钟
        var steps = route.getSteps();
        var polyline = new BMap.Polyline(route.getPath());
        map.addOverlay(polyline);

        console.log("距离：" + distance + "千米");
        console.log("预计时间：" + duration + "分钟");

        for (var i = 0; i < steps.length; i++) {
          console.log(steps[i].getDescription());
        }
      }
    }
  </script>

로그인 후 복사

위 코드에서 "YOUR-KEY"를 자신의 Baidu 지도로 바꿔야 합니다. 열쇠.

요약
위의 방법을 통해 JS와 바이두맵을 활용하여 지도 주행 경로 계획 기능을 쉽게 구현할 수 있습니다. 몇 줄의 코드만으로 지도에 운전경로를 표시하고 운전경로에 대한 정보를 얻을 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 JS 및 Baidu Maps를 사용하여 지도 운전 경로 계획 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!