Baidu Map API detailed guide to the driving

This article will introduce you how to use the Baidu Map API to provide driving navigation services for development.

A simple example

Driving navigation service gives the driving route from start to finish based on the incoming start and end information, and we start with the simplest example:

var map = new Bmap.map (' container ');
Map.centerandzoom (New Bmap.point (116.404, 39.915), one);

var driving = new Bmap.drivingroute (map, {
    renderoptions: {
        map:map
    }
});

Driving.search (' Yuanmingyuan ', ' Xidan ');

The above code is very simple, first initialize the map (the map container of the HTML code omitted), and then instantiate a Drivingroute class, and configure the parameters (parameter specific meaning follow-up). Finally, the search method of the instance is invoked to search the driving scheme. We will see the following effect in the browser:

The first parameter of the Drivingroute constructor makes the scope of the search, where we pass the map instance, which means that the location of the driving navigation is retrieved according to the city where the current map center point is located. Of course you can also pass a string of city names:

var driving = new Bmap.drivingroute ("Beijing", {
    renderoptions: {
        map:map
    }
});

The second parameter of the Drivingroute constructor is an optional configuration with a type of drivingrouteoptions. Here we only use the Renderoptions attribute, which is the type of the Drivingrenderoptions class, which controls the rendering of the retrieved results, such as whether to render the result line on the map, whether the detailed scenario description is rendered at a location on the page, and so on. Here we use the map attribute, which allows the search results to be automatically displayed on the maps, so that we can see that the map has a starting point, an end point, and a line between them.

Other ways to initiate a search

In addition to using a string to initiate a drive search, you can also use coordinates to initiate:

Driving.search (New Bmap.point (116.404, 39.915), New Bmap.point (116.389, 39.811));

When using coordinates to initiate a retrieval, there is no specific description of the starting and ending points, only the "starting point" and "end" are described.

Looking through the documentation, search also supports the Localresultpoi type, which does not have a constructor, but can be represented in literal form. We can construct this type of instance ourselves and initiate a driving search:

Driving.search ({title: ' My Home ', Point:new bmap.point (116.410, 39.915)}, {title: ' Your Home ', Point:new bmap.point (116.400, 39.9 10)});

In this way, the API is displayed with a developer's custom name. Of course, the result type obtained by Localsearch is also localresultpoi, and the result object can be passed directly into the search method.

Rendering settings

In addition to setting up the displayed map, there are many other features in the rendering settings, most commonly the detailed scenario description is displayed on the page:

<! DOCTYPE html>
 

 

 


Here we add a div,id to the panel, then add the Panel attribute to the Renderoptions and pass the div ID. We will see the following effects:


The API fills the detailed driving scenario description into the DIV container with the ID panel. At this point, click on the specific proposal in the Panel will produce interactive effect in the plot area.

In addition, if the rendering setting is set to True, the user can drag the starting point and end point of the map to change the driving scheme, or you can drag and drop the modification path point arbitrarily: enabledragging




var driving = new Bmap.drivingroute (map, {
    renderoptions: {
        map:map,
        Panel: ' Panel ',
        enabledragging: True
    }
});
 

 

 



The Highlightmode property allows you to control the display point position or show a route when clicking the scenario description in the panel, which supports the following two values: Bmap_highlight_step: Show the key point Bmap_highlight_route: Show the Road

The default is to show the key points, as shown in the following figure:


Click on the third item in the description to display a key point information (according to the description, this point is in Zhongguancun a bridge to the left position point), you can also show the route:


At this point, and then select the third step, the map shows a section of the line (that is, "along the Zhongguancun North Street 1.6 kilometers" This section of the road).


Driving strategy Configuration

There is also a property drivingpolicy for the control policy in Drivingrouteoptions, and its property values can be as follows: Bmap_driving_policy_least_time: Minimum time, default Bmap_driving_ Policy_least_distance: Shortest distance bmap_driving_policy_avoid_highways: avoid high-speed

Different driving schemes can be obtained by configuring policies.


callback function

There are many callback function properties in the drivingrouteoptions, such as: Onsearchcomplete, Onmarkersset, Oninfohtmlset, Onpolylinesset and Onresultshtmlset. The Drivingroute class also has a corresponding method for setting callbacks: Setsearchcompletecallback, Setmarkerssetcallback, and so on. In fact, the effect is the same regardless of whether the callback is passed by configuration parameters or through an interface. What is the use of these callbacks?

Through the callback function, the developer can obtain more data resources, can use these data resources better, more flexible to carry on two times development. The following example uses Onsearchcomplete to get data to add overlays and descriptive information:




<! DOCTYPE html>  

 

 


In the above code, we initialize the Drivingroute instance without setting the renderoptions, which means that the results of driving navigation are not automatically added to the map, the description information does not show now on the page, we get the data by Onsearchcomplete to add ourselves. The parameter of the Onsearchcomplete callback function is a Drivingrouteresult object through which data information can be obtained. In the callback function we first judge whether the search is successful, and if so, add the overlay and descriptive information. After adding the overlay, we call the map's SetViewport method to set the field of view so that the results are fully displayed in the map. When we get the solution we call the Getplan method and give an index of 0, which means getting the first driving scheme (in fact, there is only one driving scheme at the moment, but there may be multiple scenarios in the future). Each scenario is described by Routeplan, which contains a number of route objects that represent lines between two points (the total number of route objects is 1 in the case of only one destination), and the route object contains a number of step, which is available through the Getstep method, The Step object describes the information for each key point.

The results of the above code in the browser are as follows:


Through the interface, you can further enrich this function, such as adding some click interaction.


Issues to be aware of

Search has no results

If the search keyword is too vague, such as from "McDonald's" to "KFC", so that the API does not know from which McDonald's to which KFC, so at this time will not be able to obtain navigation lines. In order for the navigation to return more accurate results, it is recommended that you use the point type or the Localsearchpoi type to initiate the retrieval.

The map did not clear the last result after initiating a new search

 In general, you only need a Drivingroute instance to do the retrieval, and the same instance automatically clears the last retrieved result (including the map overlay and description) at the time of retrieval. However, if each retrieval is a new Drivingroute instance, the results of each instance will appear on the map and cannot be automatically erased.