Baidu map API details-bus navigation

We have previously introduced driving navigation. Today we will talk about bus navigation.

 

What is bus navigation?

The bus navigation function tells users the bus travel plan from A to B, rather than the specific bus route information, which requires the attention of developers.

The bus navigation function is implemented through the transitroute class. here we need to explain why it is not a busroute, but a transitroute. Baidu provides public transportation navigation. Public Transportation involves not only bus, but also subway, ferry, and even airplane trains. Therefore, the public transit uses transit to describe it.

 

A simple example

Let's start with a simple example:

 
VaRTransit =NewBmap. transitroute ('beijing ',{
Renderoptions :{
Map: map,
Panel: 'panel'
}
});
Transit. Search ('xidan ', 'summer Palace ');
 

CodeYou can use renderoptions to set the rendered map instance and the dashboard container ID. Map is an instantiated map, and panel is the ID of the ready Div element. The following result is displayed:

A scheme is displayed on the map. The descriptions of all schemes are listed on the panel. Click a different scheme map to display the scheme.

In addition to the string type, coordinates can be provided for query to obtain more accurate results. For example, the query from "McDonald's" to "KFC" won't get the result, because the API doesn't know from which McDonald's to which KFC. The following example uses coordinates for search.

 
Transit. Search (NewBmap. Point (116.315157, 39.987946 ),
NewBmap. Point (116.371499, 39.880394 ));
 

The following figure shows the query result by using coordinates as parameters:

Note that there is no specific location description for the start and end points because coordinates are provided.

Similar to driving navigation, the start and end points can also be of the localresultpoi type. We still use the preceding coordinates to query, but are encapsulated in a localresultpoi type:

 
Transit. Search ({Title: 'Here I ', point:NewBmap. Point (116.315157, 39.987946 )},
{Title: 'Here you are ', point:NewBmap. Point (116.371499, 39.880394 )});
 

In this way, the API can display the start and end descriptions when displaying the results.

 

Custom cover display

If you are not satisfied with the color and style of the default line provided by API, you can also choose to create it through the data interface. Note: When you create a cover by yourself, clicking the solution in the list will not update the map area, because all the elements of the map area are created by the developer. Before using the data interface, you must first use a structure diagram to understand the components of a complete bus solution:

A no-change bus plan consists of the starting point, the walking line from the starting point to the upper station, the bus line from the bus station to the lower station, and the walking line from the bus station to the end. Of course, the start point may overlap with the upper station, or the end point may overlap with the lower station. At this time, the walking line length is 0 (when the start point or the end point itself is the bus station ). If there is a transfer, there will also be a walking route (as shown in the second Plan) to get off at the station during each transfer ).

Therefore, no matter what the bus plan is, the data representation is consistent:

• Direct Solution: 2 walking lines + 1 bus line
• Transfer plan: 3 walking lines + 2 bus lines
• Transfer plan: 4 walking lines + 3 bus lines

And so on.

The API uses transitrouteresult to describe the bus navigation result, and uses transitrouteplan to describe a bus plan. So how can we get information about bus navigation results and specific solutions? See the following example:

 VaR Transit = New Bmap. transitroute ('beijing ',{
Onsearchcomplete:Function (Result ){
 If (Transit. getstatus () = bmap_status_success ){
 //  Obtain the start and end information from the result object.  
              VaR Start = result. getstart ();
 VaR End = result. getend ();
Addstart (start. Point, start. Title );
Addend (end. Point, end. Title );
 //  Directly obtain the first solution  
             VaR Plan = result. getplan (0 );
 //  Traverse all walking routes  
              For ( VaR I = 0; I <plan. getnumroutes (); I ++ ){
 If (Plan. getroute (I). getdistance ( False )> 0 ){
 //  It is determined that only a walking line greater than 0 will be drawn.  
 Addmediaroute (Plan. getroute (I). getpath ());
}
}
 //  Traverse all bus lines  
              VaR Alllinepath = [];
 For (I = 0; I <plan. getnumlines (); I ++ ){
Alllinepath = alllinepath. Concat (Plan. Getline (I). getpath ());
Addline (Plan. Getline (I). getpath ());
}
 //  Finally, set the map field of view based on the bus line points.  
 Map. setviewport (alllinepath );
}
}
});

Transit. Search ('peking University ', 'Beijing Jiaotong University ');
 
//  Add start cover  
  Function Addstart (point, title ){
Map. addoverlay ( New Bmap. Marker (point ,{
Title: title,
Icon: New Bmap. Icon ('HTTP: // images.cnblogs.com/cnblogs_com/jz1108/329471/o_blue.png ', New Bmap. Size (38, 41 ),{
Anchor:New Bmap. Size (4, 36)
})}));
}

 //  Add End Cover  
  Function Addend (point, title ){
Map. addoverlay ( New Bmap. Marker (point ,{
Title: title,
Icon: New Bmap. Icon ('HTTP: // images.cnblogs.com/cnblogs_com/jz1108/329471/o_red.png ', New Bmap. Size (38, 41 ),{
Anchor:New Bmap. Size (4, 36)
})}));
}

 //  Add route  
  Function Addmediaroute (PATH ){
Map. addoverlay ( New Bmap. polyline (path ,{
Strokecolor: 'black ',
Strokeopacity: 0.7,
Strokeweight: 4,
Strokestyle: 'dashed ',
Enableclicking: False 
}));
}

 Function Addline (PATH ){
Map. addoverlay ( New Bmap. polyline (path ,{
Strokecolor: 'blue ',
Strokeopacity: 0.6,
Strokeweight: 5,
Enableclicking: False 
}));
}

In the above Code, the callback function is set through the onsearchcomplete attribute of transitrouteoptions. Once the retrieval is complete, the callback function is called. At the beginning of the callback function, we first determine whether the retrieval is successful. If the retrieval succeeds, it indicates that at least one bus solution is returned. Here we first obtain the start and end points through the result object, and then directly obtain the first scheme, traverse all the walking routes and bus routes in the scheme and draw them on the map. Finally, we can set an appropriate map view based on the bus route points.

You will get the following results in the browser:

In addition to obtaining the result object through callback function parameters, you can also obtain the result object through the getresults method of transitroute. Note that the search process is asynchronous, the following code will not produce results:

 
Transit. Search ('xidan ', 'summer Palace ');
VaRRes = transit. getresults ();//Undefined
 

Because the search result is not returned immediately after the search method is called. The developer can call this method in the callback function to obtain the result immediately, or call it when the callback function needs to obtain the result data after several times of execution.

 

Custom solution description

You can use the getdescription of transitrouteplan to obtain the complete solution description. However, if you want to customize the description format, you can use the data interface. For example:

 VaR Transit = New Bmap. transitroute ('beijing ',{
Onsearchcomplete: Function (Result ){
If (Transit. getstatus () = bmap_status_success ){
 //  Obtain the start and end information from the result object.  
              VaR Start = result. getstart (). title;
 VaR End = result. getend (). title;

 //  Directly obtain the first solution  
              VaR Plan = result. getplan (0 );
 //  Obtains the sum of the number of walking routes and bus routes for traversing. 
              VaR Total = plan. getnumroutes () + plan. getnumlines ();

 VaR Description = ['slave '+ start];
 VaR Addendtitle = True ;
 For ( VaR I = 0; I <total; I ++ ){
 If (I % 2 = 0 ){
 //  I is an even number  
                     //  Process the first walk description logic  
                      If (I/2 = 0 ){
 If (Plan. getroute (I/2). getdistance ( False ) = 0 ){
Description = ['slave '];
}
}
 //  Process the last walking description logic  
                      If (I/2 = plan. getnumroutes ()-1 ){
If (Plan. getroute (I/2). getdistance ( False ) = 0 ){
Addendtitle = False ;
}
}
 If (Plan. getroute (I/2). getdistance ( False )> 0 ){
Description. Push ('walking approx '+ plan. getroute (I/2). getdistance ( True ) + '');
}
} Else {
 //  I is an odd number  
                      VaR Line = plan. Getline (I-1)/2 );
If (I = 0 ){
Description. Push (line. getgetonstop (). Title + ',');
}
If (I> 0 ){
If (Plan. getroute (I-1)/2). getdistance (false)> 0 ){
Description. Push (line. getgetonstop (). Title + ',');
}
}
Description. Push ('Ride '+ LINE. Title + ',');
Description. Push ('pass through '+ LINE. getnumviastops () + 'stopped ');
Description. Push ('Get off at '+ LINE. getgetoffstop (). Title +' station ,');
}
}
 If (Addendtitle ){
Description. Push (end + '. ');
}
 //  Replace the possible comma at the end  
              VaR Descriptionstr = description. Join (''). Replace (/\ uff0c $ /,'. ');
}
}
});

Transit. Search ('peking University ', 'Beijing Jiaotong University ');

The variable descriptionstr says, "a 60-meter walk from Peking University to the West Gate of Peking University and get off at the station of the Chinese Emy of Agricultural Sciences on the express 106 (North Gate of the Central Party School-tiancun North Road, take the 26 (erlizhuang-Westbound gate) and get off at the Beijing Jiao Tong University station after 4. ".

 

Callback Function details

In the previous examples, we used the onsearchcomplete callback function, and provided the following callback functions in the API. Their meanings and triggering times are as follows:

• Onmarkersset: If a rendered map is set, this function is triggered after the API automatically adds the annotation.
• Onpolylinesset: If a rendered map is set, this function is triggered when the API automatically adds a line covering.
• Oninfohtmlset: If a rendering map is set, this function is triggered when you click the annotation pop-up information window.
• Onresultshtmlset: If the rendering sidebar is set, this function is triggered after the API fills in HTML.