之前我们讲了怎么在百度地图上设置Marker(如A点。。) 和弹出框（跟随Marker的，Marker移动的时候也是会跟着移动的），接着又觉得百度地图自带的放大缩小不（fei）是(chang)很(de)漂(chou)亮,我们自定义了放大缩小的控件，本篇我们将制作类似百度地图API制作类似百度地图的公交/驾车/行走/查询界面并实现简单的路线规划功能。

先来张截图:

 

这个界面的实现其实是使用的SlidingUpPanelLayout 开源库从而使得可以跟随手指下拉上划：

其实布局也没什么好讲的，自己到百度地图的APK包里扒拉扒拉图片就都有了，哈哈

<?xml version="1.0" encoding="utf-8"?> <com.jsbtclient.cusViews.SlidingUpPanelLayout xmlns:android="" xmlns:tools="" xmlns:sothree="" android:id="@+id/map_sliding_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom" sothree:umanoPanelHeight="60dp" sothree:umanoShadowHeight="4dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <com.baidu.mapapi.map.MapView android:id="@+id/map_mapView" android:layout_width="match_parent" android:layout_height="match_parent" android:apiKey="vNQtC8sQSODsLGBk01HYaBQt" android:clickable="true" /> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" > <com.jsbtclient.cusViews.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:background="@drawable/map_relocation_bg" android:src="@drawable/baidu_map_relocation" /> </FrameLayout> </RelativeLayout> <LinearLayout android:id="@+id/map_slidePanel" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" > <LinearLayout android:id="@+id/slidingdrawer_menu" android:layout_width="match_parent" android: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="@drawable/map_route_bus_selector" /> <ImageView android:id="@+id/map_route_car" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="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" android:layout_weight="1" android:src="@drawable/map_route_walk_selector" /> <TextView android:id="@+id/map_route_search" android:layout_width="wrap_content" android:layout_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="match_parent" android:layout_height="0.1dp" android:background="@color/lightgray" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/white_shadow_bg" android:orientation="horizontal" android:padding="10dp" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:layout_gravity="center_vertical" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android: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_width="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:layout_height="wrap_content" android:layout_gravity="center_vertical" android:background="@null" android:text="@string/map_my_address" android:textColor="@color/lightgrey" android:textSize="16sp" /> <View android:layout_width="match_parent" 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:background="@null" android:text="@string/map_company_address" android:textColor="@color/call_fragment_bg_color" android:textSize="16sp" /> </LinearLayout> <ImageView android:id="@+id/map_route_exchange" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1" android:src="@drawable/route_exchange" /> </LinearLayout> </LinearLayout> </com.jsbtclient.cusViews.SlidingUpPanelLayout>

UI上的事就不重点说了，功能实现才是重点：