百度地图API制作类似 百度地图的路线导航界面并实现简单的路线规

之前我们讲了怎么在百度地图上设置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" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent" ><com.baidu.mapapi.map.MapViewandroid:id="@+id/map_mapView"android:layout_width="match_parent"android:layout_height="match_parent"android:apiKey="vNQtC8sQSODsLGBk01HYaBQt"android:clickable="true" /><FrameLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true" ><com.jsbtclient.cusViews.ZoomControlViewandroid: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><ImageViewandroid: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><LinearLayoutandroid:id="@+id/map_slidePanel"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="10dp" ><LinearLayoutandroid:id="@+id/slidingdrawer_menu"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="10dp" ><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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" /><TextViewandroid: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><Viewandroid:layout_width="match_parent"android:layout_height="0.1dp"android:background="@color/lightgray" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/white_shadow_bg"android:orientation="horizontal"android:padding="10dp" ><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:layout_gravity="center_vertical"android:orientation="vertical"><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:src="@drawable/map_route_start" /><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:src="@drawable/map_route_end" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="8"android:orientation="vertical"android:padding="10dp" ><EditTextandroid: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" /><Viewandroid:layout_width="match_parent"android:layout_height="0.1dp"android:layout_marginBottom="20dp"android:layout_marginTop="20dp"android:background="@color/lightgray" /><EditTextandroid: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><ImageViewandroid: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上的事就不重点说了,功能实现才是重点:

我们来理一下思路用户当前的位置是使用百度地图定位获取的,而目标位置则应该是用户自己输入的,我这里的实现比较简单,目的地或者出发地点是固定的就是公司地址,

『 不可能 』只存在於蠢人的字典里

百度地图API制作类似 百度地图的路线导航界面并实现简单的路线规

相关文章:

你感兴趣的文章:

标签云: