Baidu Map api--make multi-pass point of the line navigation

Summary:

At the end of the holiday, yogurt sister will drive from Chongqing to Beijing . But on the way to Xi ' an grandmother home to get milk biscuits it! With Baidu Map API, can you help me realize this wish?

--------------------------------------------------------------------------------------------------------------- ---------

First, create a map

The first thing to tell you is that the API1.2 version of the cancellation key, cancel the service settings, you can use a more concise way to reference the API JS ~

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

　　

Everybody, come with me. Create a simple map:

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

　　

Then add some appropriate controls to the map:

Map.addcontrol (New Bmap.navigationcontrol ());               Add a Pan zoom control
Map.addcontrol (New Bmap.scalecontrol ());                    Add a scale bar control
Map.addcontrol (New Bmap.overviewmapcontrol ());              Add a thumbnail map control

　　

I found the coordinates of Chongqing, Xi ' An, Beijing three cities by hand, using the Coordinate pickup tool (click) to find these three latitude and longitude easily.

Of course, you can also use the search method of the Localsearch class. This can be arbitrary.

After locating the coordinate point, create three point objects.

var myP1 = new Bmap.point (106.521436,29.532288);    Starting point-Chongqing
var myP2 = new Bmap.point (108.983569,34.285675);    Destination-Xian
var myP3 = new Bmap.point (116.404449,39.920423);    Destination-Beijing

　　

II. Create a drive navigation and two drive search

OK, now to create a car navigation bar ~

Isn't that a simple sentence? You can create a driving guide with this sentence.

var driving = new Bmap.drivingroute (map);    Create a driving instance

　　

Then write two methods of search:

The first one is the search from Chongqing to Xian, the second from Xian to Beijing.

Driving.search (myP1, myP2);                 First drive Search
Driving.search (myP2, myP3);                 A second drive search

　　

Third, draw the polyline yourself

Next, we draw the search-completed route in the callback function Setsearchcompletecallback.

Note Oh, here are two search routes are drawn out Oh ~ ~

So simple three words, very simple.

First sentence, get array

Second sentence, creating a polyline

Third sentence, add polyline overlay

    Driving.setsearchcompletecallback (function () {
        var pts = Driving.getresults (). Getplan (0). Getroute (0). GetPath ();    Get an array of points by driving an instance

        var polyline = new Bmap.polyline (pts);     
        Map.addoverlay (polyline);

}

　　

This time, the whole driving navigation is like this, it is filled with a sense of joy, like an earthworm O (∩_∩) o~

Four, add the starting point, the end point, the marker

In fact, this pass point, you can do imaging Baidu map Home Drive navigation, there is a red-green start point icon. Such as:

Note: This, everyone at random, we would like to add marker (can replace any icon image), or want to add a label, or even some other cover, are OK.

API Consulting
Please download Baidu Hi Chat Tool First
JS Edition Hi Group: 1357363
Mobile Hi Group: 1363111

　　

However, I still like the red label, I can also add text callout.

So, I simply use the red marker plus the label to express. Such as.

The code for adding marker and labels is as follows:

var m1 = new Bmap.marker (myP1); Creation of 3 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 ("starting point", {POSITION:MYP1}); Create a 3 label
var lab2 = new Bmap.label ("Route point", {POSITION:MYP2});
var lab3 = new Bmap.label ("End point", {position:myp3}); 
Map.addoverlay (LAB1);
Map.addoverlay (LAB2);
Map.addoverlay (LAB3);

　　

Five, adjust to the best view

Personally think that SetViewport is a very useful good thing. Because it can show you the most perfect view of your mark.

If you do not add setviewport, your map may only have half the effective view, not the full 3 labels. Such as:

The code is simple, let's take a look at the class reference:

That is, as long as a little object array is passed in, the system will help you to complete the best view of the display!!

Map.setviewport ([myp1,myp2,myp3]);          Adjust to the best view

Tip: You can do a time-lapse animation, so that the best view of the display more beautiful!

In addition, marker can also have animation, do not ignore. See: Http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3_1#3&1

Six, complete code

<! DOCTYPE html>


<meta http-equiv= "Content-type" content= "text/html; charset=gb2312" />
<title> driving via </title>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.2" ></script>

<body>
<p><input type= ' button ' value= ' Start ' onclick= ' run (); '/></p>
<div style= "width:820px;height:500px;border:1px solid Gray" id= "container" ></div>

</body>

<script type= "Text/javascript" >
var map = new Bmap.map ("container");
Map.centerandzoom (New Bmap.point (116.404, 39.915);
Map.addcontrol (New Bmap.navigationcontrol ()); Add a pan zoom control
Map.addcontrol (New Bmap.scalecontrol ()); Add a scale bar control
Map.addcontrol (New Bmap.overviewmapcontrol ()); Add a thumbnail map control

var myP1 = new Bmap.point (106.521436,29.532288); Starting point-Chongqing
var myP2 = new Bmap.point (108.983569,34.285675); Destination-Xian
var myP3 = new Bmap.point (116.404449,39.920423); Destination-Beijing

Window.run = function () {
map.clearoverlays (); Clear all overlays on the map
var driving = new Bmap.drivingroute (map); Create a driving instance
Driving.search (myP1, myP2); First drive Search
Driving.search (myP2, myP3); A second drive search
Driving.setsearchcompletecallback (function () {
var pts = Driving.getresults (). Getplan (0). Getroute (0). GetPath (); Get an array of points by driving an instance

var polyline = new Bmap.polyline (pts); 
Map.addoverlay (polyline);
        
var m1 = new Bmap.marker (myP1); Creation of 3 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 ("starting point", {POSITION:MYP1}); Create a 3 label
var lab2 = new Bmap.label ("Route point", {POSITION:MYP2});
var lab3 = new Bmap.label ("End point", {position:myp3}); 
Map.addoverlay (LAB1);
Map.addoverlay (LAB2);
Map.addoverlay (LAB3);
        
setTimeout (function () {
Map.setviewport ([myp1,myp2,myp3]); Adjust to the best view
},1000);
        
    });
}
</script>

　　

Baidu Map api--make multi-pass point of the line navigation