Baidu Map API makes the route navigation interface similar to Baidu Map and realizes simple route planning function.

Before we talked about how to set up marker on the Baidu map (such as point a). And pop-up box (follow marker, marker move will also follow the move), and then feel that the Baidu map with the zoom reduction (FEI) is (Chang) is (DE) drift (chou) Bright, we have customized the zoom out of the control, This article we will make similar Baidu map API to make similar to Baidu map of the bus/drive/walk/query interface and achieve a simple route planning function.

First come to Zhang:

The implementation of this interface is actually using the Slidinguppanellayout Open Source Library so that you can follow your finger down the row:

In fact, the layout is not good to say, their own to Baidu map apk bag ba la ba la pictures are all there, haha

<?xml version= "1.0" encoding= "Utf-8"? ><com.jsbtclient.cusviews.slidinguppanellayout xmlns:android= "http ://schemas.android.com/apk/res/android "xmlns:tools=" Http://schemas.android.com/tools "xmlns:sothree="/HTTP/ Schemas.android.com/apk/res-auto "android:id=" @+id/map_sliding_layout "android:layout_width=" Match_parent "Androi d:layout_height= "Match_parent" android:gravity= "Bottom" sothree:umanopanelheight= "60DP" sothree:umanoshadowheight = "4DP" > <relativelayout android:layout_width= "match_parent" android:layout_height= "Match_parent" &        Gt            <com.baidu.mapapi.map.mapview android:id= "@+id/map_mapview" android:layout_width= "Match_parent" android:layout_height= "Match_parent" android:apikey= "VNQTC8SQSODSLGBK01HYABQT" android:cli Ckable= "true"/> <framelayout android:layout_width= "Match_parent" android:layout_height = "Wrap_content" andRoid:layout_alignparentbottom= "true" android:layout_alignparentleft= "true" > <com.jsbtclient.c Usviews.zoomcontrolview android:id= "@+id/map_zoomcontrol" android:layout_width= "wrap_content "Android:layout_height=" wrap_content "android:layout_gravity=" right "Android : layout_marginbottom= "20DP" android:layout_marginright= "15DP" > </com.jsbtclient.cusviews. zoomcontrolview> <imageview android:id= "@+id/map_relocation" android:layout                 _width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "Left|top" android:layout_marginleft= "15DP" android:layout_margintop= "5DP" Android:back ground= "@drawable/map_relocation_bg" android:src= "@drawable/baidu_map_relocation"/> </framela Yout> </relativelayout> <linearlayout android:id= "@+id/map_slidepanel" android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" android:padding= "10DP" > <l Inearlayout android:id= "@+id/slidingdrawer_menu" android:layout_width= "Match_parent" Android            oid:layout_height= "wrap_content" android:orientation= "horizontal" android:padding= "10DP" >                <imageview android:id= "@+id/map_route_bus" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_weight= "1" android:src= "@drawa Ble/map_route_bus_selector "/> <imageview android:id=" @+id/map_route_car "a Ndroid:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_weigh t= "1" android:src= "@drawable/map_route_car_selector"/> <imageview android:id= "@+id/map_route_walk" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" and                roid:layout_weight= "1" android:src= "@drawable/map_route_walk_selector"/> <textview Android:id= "@+id/map_route_search" android:layout_width= "Wrap_content" Android:layo                ut_height= "Wrap_content" android:layout_gravity= "center_vertical" android:layout_weight= "1"                android:text= "@string/map_route_search" android:textcolor= "@color/call_fragment_bg_color" Android:textsize= "16sp"/> </LinearLayout> <view android:layout_width= "M Atch_parent "android:layout_height=" 0.1DP "android:background=" @color/lightgray "/> <li Nearlayout anDroid:layout_width= "Match_parent" android:layout_height= "wrap_content" android:background= "@drawable /WHITE_SHADOW_BG "android:orientation=" horizontal "android:padding=" 10DP "> <linear                Layout android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_weight= "1" android:layout_gravity= "center_vertical" android:orientation= "V Ertical "> <imageview android:layout_width=" match_parent "Androi d:layout_height= "Wrap_content" android:layout_gravity= "center_vertical" android:src=                    "@drawable/map_route_start"/> <imageview android:layout_width= "Match_parent"                    android:layout_height= "Wrap_content" android:layout_gravity= "center_vertical" Android:src= "@dRawable/map_route_end "/> </LinearLayout> <linearlayout Android:layout_wi                Dth= "Wrap_content" android:layout_height= "Wrap_content" android:layout_weight= "8"                    android:orientation= "vertical" android:padding= "10DP" > <edittext Android:id= "@+id/map_my_address" android:layout_width= "Match_parent" Android:lay out_height= "Wrap_content" android:layout_gravity= "center_vertical" Android:backgroun                     D= "@null" android:text= "@string/map_my_address" android:textcolor= "@color/lightgrey" Android:textsize= "16sp"/> <view android:layout_width= "match_p                    Arent "android:layout_height=" 0.1DP "android:layout_marginbottom=" 20DP " Android:layout_margintop= "20DP" android:background= "@color/lightgray"/> <edittext Android:id= "@+id/map_target_address" android:layout_width= "Match_parent" Android: layout_height= "Wrap_content" android:layout_gravity= "center_vertical" android:backgr Ound= "@null" android:text= "@string/map_company_address" android:textcolor= "@color/ca Ll_fragment_bg_color "android:textsize=" 16sp "/> </LinearLayout> <ima                Geview android:id= "@+id/map_route_exchange" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_gravity= "center_vertical" Android:lay out_weight= "1" android:src= "@drawable/route_exchange"/> </LinearLayout> </linearlayo Ut></com.jsbtclienT.cusviews.slidinguppanellayout> 

The thing on the UI is not focused on, the functional implementation is the focus:

Let's take a look at the idea. The user's current location is to use the Baidu map location to obtain, and the target location should be the user input, I here the realization is relatively simple, the destination or the place of departure is fixed is the company address,

But the principle is the same only one less network request. Now suppose the user destination is the specified location (known latitude and longitude), then we need to query the user's current location, so first to locate the user's current location.

/** * Open location, callback interface for Mylocationlistener class/interface */private void Startlocation () {locationclientoption option = new Locationclientoption (); Option.setlocationmode (locationmode.hight_accuracy);//Set positioning mode Option.setcoortype ("gcj02") ;//Return the positioning result is Baidu latitude and longitude Option.setscanspan (1000);//Set the time interval for initiating a location request is 1000msoption.setisneedaddress (true); Whether to return address mlocationclient.setlocoption (option); Mlocationclient.start ();//initiate location request}

Then look at the callback interface:

/** * Positioning Callback Listener *  */public class Mylocationlistener implements Bdlocationlistener {@Overridepublic void Onreceivelocation (bdlocation location) {///Callback Returns object object containing multiple attributes, here we only need latitude userlatlng = new latlng (Location.getlatitude (), Location.getlongitude ());//This code can be ignored, I do not know the location can get the specific address, so use the  detailed address and latitude and longitude conversion interface//actually LOCATION.GETADDRSTR (); You can get the address if (USERLATLNG! = null) {Mgeocoder.reversegeocode (New reversegeocodeoption (). Location (USERLATLNG));} Mlocationclient.stop ();}}

Then look at the callback interface that turns the latitude and longitude into a specific address:

@Overridepublic void Ongetreversegeocoderesult (reversegeocoderesult result) {if (result = = NULL | | Result.error! = Search Result.ERRORNO.NO_ERROR) {host.showtoast (r.string.map_result_error); return;} Baidumap.addoverlay (New Markeroptions (). Position (Result.getlocation ()). Icon ( Bitmapdescriptorfactory.fromresource (R.drawable.baidu_map_marka)); Baidumap.setmapstatus ( MAPSTATUSUPDATEFACTORY.NEWLATLNG (Result.getlocation ())); mposition = Result.getaddress (). toString ();//The above code is ignored, The mposition here is the specific address plannode Stnode = null, Ennode = NULL;  Declare two nodes, stnote start node, ennode destination node if (! isexchanged)  //here if else can be ignored, is to achieve the destination address and the current address swap effect of {myaddress.settext (mposition); Stnode = Plannode.withlocation (USERLATLNG);//transfer of latitude and longitude objects to Ennode = Plannode.withlocation (LATLNG);} else {targetaddress.settext (mposition); ennode = Plannode.withlocation (USERLATLNG); stnode = Plannode.withlocation ( LATLNG);} Startroutesearch (Stnode, ennode);  Start Search}

/** * Initiate route planning request, get route * Callback interface for Ongettransitrouteresult/ongetwalkingrouteresult/ongetdrivingrouteresult * @param stnode * @ param ennode */private void Startroutesearch (Plannode stnode, Plannode ennode) {route = Null;baidumap.clear ();  Each re-search clears all the marks on the map and the route if (SearchType = = Searchtype.bus) {msearch.drivingsearch (New drivingrouteplanoption ()). From (Stnode). to (Ennode)); Search driving route} else if (searchtype = = Searchtype.car) {msearch.transitsearch (New transitrouteplanoption ()). from (Stnode). City ("Wuxi"). to (Ennode));//Search bus route} else if (searchtype = = Searchtype.walk) {Msearch.walkingsearch (new Walkingrouteplanoption ()). from (Stnode) to (Ennode));//Search Walking route}}

The three-clock search method here corresponds to three different callback interfaces, namely:

@Overridepublic void Ongetdrivingrouteresult (Drivingrouteresult drouteresult) {if (Drouteresult = = NULL | | Drouteresult.error! = SearchResult.ERRORNO.NO_ERROR) {host.showtoast (r.string.map_result_error);} if (Drouteresult.error = = SearchResult.ERRORNO.AMBIGUOUS_ROURE_ADDR) {//end or pass-point address is ambiguous, the following interface to obtain the proposed query information// Result.getsuggestaddrinfo () return;} if (Drouteresult.error = = SearchResult.ERRORNO.NO_ERROR) {//Nodeindex = -1;route = Drouteresult.getroutelines (). Get (0) ;  Get route Drivingrouteoverlay overlay = new Drivingrouteoverlay (BAIDUMAP); Routeoverlay = Overlay;baidumap.setonmarkerclicklistener (overlay); Overlay.setdata (Drouteresult.getroutelines ().  Get (0));//overlay is the path on the map, here it sets the data Overlay.addtomap (); Add to map Overlay.zoomtospan (); }} @Overridepublic void Ongetwalkingrouteresult (walkingrouteresult result) {if (result = = NULL | | Result.error! = Search Result.ERRORNO.NO_ERROR) {host.showtoast (r.string.map_result_error);} if (Result.error = = SearchResult.ERRORNO.AMBIGUOUS_ROURE_ADDR) {//from end point or via addressDisambiguation, get suggested query information via the following interface//Result.getsuggestaddrinfo () return;} if (Result.error = = SearchResult.ERRORNO.NO_ERROR) {//Ibid. route = Result.getroutelines (). get (0); Walkingrouteoverlay overlay = new Walkingrouteoverlay (BAIDUMAP); Baidumap.setonmarkerclicklistener (overlay); Routeoverlay = Overlay;overlay.setdata (Result.getroutelines (). Get (0)); Overlay.addtomap (); Overlay.zoomtospan ();}} @Overridepublic void Ongettransitrouteresult (transitrouteresult result) {if (result = = NULL | | Result.error! = SEARCHRESU Lt. Errorno.no_error) {host.showtoast (r.string.map_result_error);} if (Result.error = = SearchResult.ERRORNO.AMBIGUOUS_ROURE_ADDR) {//end or pass-point address is ambiguous, the following interface to obtain the proposed query information// Result.getsuggestaddrinfo () return;} if (Result.error = = SearchResult.ERRORNO.NO_ERROR) {//Ibid. route = Result.getroutelines (). get (0); Transitrouteoverlay overlay = new Transitrouteoverlay (BAIDUMAP); Baidumap.setonmarkerclicklistener (overlay); Routeoverlay = Overlay;overlay.setdata (Result.getroutelines (). Get (0)); Overlay.addtomap (); Overlay.zoomtospan ();}} 

Such a basic Baidu map path search is complete.

Baidu Map API makes the route navigation interface similar to Baidu Map and realizes simple route planning function.