Route planning

There are various methods for route planning, including driving, public transportation, walking, cycling, and trucking. Each route planning method has a corresponding plugin. This article uses the AMap.Driving plugin for Compute Routes For Driving as an example to introduce:

1. Obtain Compute Routes For Driving data
2. Use the default UI to display driving route details
3. Use the AMap.DragRoute plugin to edit the route by dragging
4. Introduction to other route planning plugins

Example of Compute Routes For Driving

1、Obtain driving route data

Before using the plugin, you need to import the plugin. All examples in this article use asynchronous import. For more ways to import the plugin, go to Plugin Usage.

There are generally two ways to obtain Compute Routes For Driving: keywords and coordinates, which will be introduced separately below.

1.1 Use keywords to obtain driving route data

By providing the address information of the starting point and the destination, obtain the corresponding driving route plan. For example, if you want to drive from 2 Na Phra Lan Rd, Khwaeng Phra Borom Maha Ratchawang to 34 Wang Doem Rd, Khwaeng Wat Arun, a complete query is as follows:

AMap.plugin("AMap.Driving", function () {
  var driving = new AMap.Driving({
    policy: 0, //Planning strategy, 0 is the speed-first strategy
    });
    const points = [
        { keyword: '2 Na Phra Lan Rd, Khwaeng Phra Borom Maha Ratchawang', city: '764010000' }, 
        { keyword: '34 Wang Doem Rd, Khwaeng Wat Arun', city: '764010000' } 
    ]
    driving.search(points, function (status, result) {
        //status: complete indicates a successful query, no_data indicates no results, and error represents a query error
        //When the query is successful, the result is the corresponding driving navigation information
        console.log(result);
        
    });
});

1.2 Use latitude and longitude to obtain driving route data

By passing the latitude and longitude information of the starting point and destination, obtain the corresponding driving route plan. A complete query is as follows:

AMap.plugin("AMap.Driving", function () {
  var driving = new AMap.Driving({
    policy: 0, //Planning strategy, 0 is the speed-first strategy
  });
  var startLngLat = [100.491422, 13.749313]; //Starting point coordinates
  var endLngLat = [100.49, 13.74]; //Destination coordinates
  driving.search(startLngLat, endLngLat, function (status, result) {
    //status: complete indicates a successful query, no_data indicates no results, and error represents a query error
    //When the query is successful, the result is the corresponding driving navigation information
  });
});

1.3 Add waypoint parameters

The previous two sections introduced obtaining driving planning data through keywords and latitude and longitude, and only the start and end points were input. In fact, AMap.Driving also supports inputting waypoint data when initiating route planning, and it supports both keyword and latitude and longitude formats. Please refer to the code example below for usage:

Add waypoints using keyword method

AMap.plugin("AMap.Driving", function () {
  var driving = new AMap.Driving({
    policy: 0, //Planning strategy, 0 is the speed-first strategy
  });
  var points = [
    { keyword: '2 Na Phra Lan Rd, Khwaeng Phra Borom Maha Ratchawang', city: '764010000' }, //Starting point coordinates
    { keyword: '198 Maha Rat Rd, Khwaeng Phra Borom Maha Ratchawang', city: '764010000' }, //Set waypoint parameters, supports up to 16 waypoints
    { keyword: '34 Wang Doem Rd, Khwaeng Wat Arun', city: '764010000' } //Destination coordinates
  ];
  driving.search(points, function (status, result) {
    //status: complete indicates a successful query, no_data indicates no results, and error represents a query error
    //When the query is successful, the result is the corresponding driving navigation information
  });
});

Add waypoints using latitude and longitude

AMap.plugin("AMap.Driving", function () {
  var driving = new AMap.Driving({
    policy: 0, //Planning strategy, 0 is the speed-first strategy
  });
  var startLngLat = [100.491422, 13.749313]; //Starting point coordinates
  var endLngLat = [100.49, 13.74]; //Destination coordinates
  var opts = {
    waypoints: [[100.482731, 13.745401]], //Set waypoint parameters, supports up to 16 waypoints
  };
  driving.search(startLngLat, endLngLat, opts, function (status, result) {
    //status: complete indicates a successful query, no_data indicates no results, and error represents a query error
    //When the query is successful, the result is the corresponding driving navigation information
  });
});

The opts parameter can accept not only latitude and longitude but also keywords

var opts = {
  waypoints: [{ keyword: '198 Maha Rat Rd, Khwaeng Phra Borom Maha Ratchawang', city: '764010000' }], //Set waypoint parameters, supports up to 16 waypoints
};

2、Display Compute Routes For Driving using default UI

After using AMap.Driving to initiate a Compute Routes For Driving search, developers need to display the route details based on the returned route scheme data structure and draw it on the map using AMap.Polyline. To help developers save time and improve efficiency, the JS API provides a default UI that automatically displays structured route details on the map. If you need to use this feature, please follow the code example below to write it:

AMap.plugin("AMap.Driving", function () {
  var driving = new AMap.Driving({
    //Planning strategy, 0 is the speed-first strategy
    policy: 0, 
    //Map specifies to draw the route planning solution on the corresponding AMap.Map object
    map: map,
    //Panel specifies to display the structured route details on the corresponding DOM, and the input value must be the ID of the DOM
    panel: "my-panel", 
  });
  var points = [
    { keyword: '2 Na Phra Lan Rd, Khwaeng Phra Borom Maha Ratchawang', city: '764010000' },
    { keyword: '34 Wang Doem Rd, Khwaeng Wat Arun', city: '764010000' },
  ];
  //After the search is completed, the route will be automatically drawn on the map
  driving.search(points);
});

3、Use the Compute Routes For Driving drag-and-drop plugin to edit the route

In addition to Compute Routes For Driving through latitude and longitude and keywords, you can also use a drag-and-drop plugin to assist in Compute Routes For Driving. Below is an example of Compute Routes For Driving combined with a drag-and-drop plugin:

AMap.plugin("AMap.DragRoute", function () {
  //Path is the start, waypoints, and end of driving navigation, supporting up to 16 waypoints
  var path = [];
  path.push([100.491422, 13.749313]);
  path.push([100.482731, 13.745401]);
  path.push([100.49, 13.74]);
  var route = new AMap.DragRoute(map, path, 0);
  //Query navigation path and enable drag navigation
  route.search();
});

4、Introduction to other route planning plugins

In addition to Compute Routes For Driving, AutoNavi JS API also provides several other common travel route planning options

Compute Routes For BusesAMap.Transfer

Compute Routes For WalkingAMap.Walking

5、Description of properties and methods involved in this chapter

5.1 AMap.Driving

5.2 AMap.DragRoute