[Baidu map API] How to Create line navigation for multiple routes-driving articles and api routes

[Baidu map API] How to Create line navigation for multiple routes-driving articles and api routes

Abstract:

Leave is over.Driving from Chongqing to Beijing. HoweverOn the way to Xi'anWhat about milk cookies at grandma's house! Can I use the Baidu map API to fulfill this wish?

Bytes ------------------------------------------------------------------------------------------------------------------------

1. Create a map

First, let us know that API1.2 cancels the key and cancels service settings. You can refer to api js in a more brief way ~

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

　　

Let's create a simple map with me:

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

　　

Add some appropriate controls to the map:

Map. addControl (new BMap. navigationControl (); // Add the map of the pan zoom control. addControl (new BMap. scaleControl (); // Add a scale control map. addControl (new BMap. overviewMapControl (); // Add a thumbnail map control

　　

Coordinate points are manually located in three cities: Chongqing, Xi'an, and Beijing. You can use the coordinate pick-up tool (Click here) to easily find the coordinates and latitudes.

Of course, you can also use the search method of the localsearch class. This is free.

After finding the coordinate point, create three vertex objects.

Var myP1 = new BMap. point (106.521436, 29.532288); // start Point-Chongqing var myP2 = new BMap. point (108.983569, 34.285675); // end Point-Xi'an var myP3 = new BMap. point (116.404449, 39.920423); // end Point-Beijing

　　

2. Create a drive navigation and two drive searches

Okay. Now let's create a drive navigation ~

Is this sentence very simple? With this sentence, you can create a car navigation.

Var driving = new BMap. DrivingRoute (map); // create a driving instance

　　

Then write two search methods:

The first is the search from Chongqing to Xi'an, and the second is from Xi'an to Beijing.

Driving. search (myP1, myP2); // the first driver search driving. search (myP2, myP3); // The second driver search

　　

3. Draw a line by yourself

Next, we will plot the search route in the callback function setSearchCompleteCallback.

Note: here we have drawn both search routes ~~

Just three simple sentences.

First, obtain the Array

Second, create a line

Third, add a line covering

Driving. setSearchCompleteCallback (function () {var pts = driving. getResults (). getPlan (0 ). getRoute (0 ). getPath (); // get the array var polyline = new BMap of a series of points through the driving instance. polyline (pts); map. addOverlay (polyline );

}

　　

At this time, the whole driving navigation is like this, and it is full of happiness, like a worm O ~

4. Add the start point, end point, and passing point marker

In fact, this path can be used as an image of the Baidu map home page driving navigation, there is a red-green starting point and ending point icon. For example:

Note: If you want to add a marker (you can replace any icon image), or add a label or even any other cover, it is OK.

API Technical ConsultationDownload Baidu HI chat tool. JS version. HI group: 1357363 mobile version. HI group: 1363111

　　

However, I still like red labels. I can also add text labels.

Therefore, I simply use the red marker and label to represent it. For example.

The code for adding marker and label is as follows:

Var m1 = new BMap. marker (myP1); // create three marker var m2 = new BMap. marker (myP2); var m3 = new BMap. marker (myP3); map. addOverlay (m1); map. addOverlay (m2); map. addOverlay (m3); var lab1 = new BMap. label ("start point", {position: myP1}); // create three labels var lab2 = new BMap. label ("path", {position: myP2}); var lab3 = new BMap. label ("end", {position: myP3}); map. addOverlay (lab1); map. addOverlay (lab2); map. addOverlay (lab3 );

　　

5. adjust to the best view

I personally think setViewport is a very useful good thing. Because it can display your annotation to a perfect field of view.

Without setViewport, your map may only have half of the valid field of view, rather than the complete three annotations. For example:

The code is very simple. Let's take a look at the class reference:

That is to say, as long as an array of objects is passed in, the system will help you display the best view !!

Map. setViewport ([myP1, myP2, myP3]); // adjust to the optimal field of view

TIPS: You can make a delayed animation to make the display of the best view more beautiful!

In addition, marker can also have animations. Do not ignore them. See: http://dev.baidu.com/wiki/static/map/API/examples? V = 1.2 & 3_1 #3 & 1

6. complete code

<! DOCTYPE html>