百度mapAPI制作类似 百度map的路线导航界面并实现简单的路线规划功能

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

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


先来张截图:


百度mapAPI制作类似 百度map的路线导航界面并实现简单的路线规划功能 百度mapAPI制作类似 百度map的路线导航界面并实现简单的路线规划功能



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


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

<?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"
    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上的事就不重点说了,功能实现才是重点:

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

但是原理是相同的只不过少一次网络请求而已。 现在假设用户目的地是指定地点(已知经纬度),那么我们需要查询的就是用户当前的位置,所以首先要定位用户当前位置。

	/**
	 * 开启定位,回调接口为MyLocationListener类 /接口
	 */
	private void StartLocation()
	{
		LocationClientOption option = new LocationClientOption();
		
		option.setLocationMode(LocationMode.Hight_Accuracy);//设置定位模式
		
		option.setCoorType("gcj02");//返回的定位结果是百度经纬度
		
		option.setScanSpan(1000);//设置发起定位请求的间隔时间为1000ms
		
		option.setIsNeedAddress(true); //是否需要返回地址
		
		mLocationClient.setLocOption(option);
		
		mLocationClient.start();//发起定位请求
	}

接着看回调接口:


	
	/**
	 * 定位回调监听
	 * 
	 */
	public class MyLocationListener implements BDLocationListener {

		@Override
		public void onReceiveLocation(BDLocation location) 
		{
			//回调返回对象对象里包含多个属性,这里我们只需要经纬度
			userLatLng = new LatLng(location.getLatitude(), location.getLongitude());
			
			//这句代码可以忽略,我不知道定位可以拿到具体的地址,所以使用了  详细地址与经纬度转化的接口
			//其实location.getAddrStr();就可以拿到地址
			
			if(userLatLng != null){
				mGeoCoder.reverseGeoCode(new ReverseGeoCodeOption()
				.location(userLatLng));
			}
			mLocationClient.stop();

		}
	}




接着看将经纬度转化为具体详细地址的回调接口:

@Override
	public void onGetReverseGeoCodeResult(ReverseGeoCodeResult result) {
		if (result == null || result.error != SearchResult.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();//以上代码忽略,这里的mPosition就是具体的地址
		
		PlanNode stNode = null, enNode = null;  //声明两个节点,stNote 起始节点, enNode目的地节点
		
		if(!IsExchanged)  //这里的if else 可忽略,是为了实现目标地址与当前地址互换效果而做的
		{
			myAddress.setText(mPosition);
			stNode = PlanNode.withLocation(userLatLng);//将经纬度对象传入
			enNode = PlanNode.withLocation(latLng);
			
		}else 
		{
			targetAddress.setText(mPosition);
			enNode = PlanNode.withLocation(userLatLng);
			stNode = PlanNode.withLocation(latLng);
		}
		
		StartRouteSearch(stNode, enNode);  //开始搜索
	}


	/**
	 * 发起路线规划请求,获取路线
	 * 回调接口为onGetTransitRouteResult/onGetWalkingRouteResult/onGetDrivingRouteResult
	 * @param stNode
	 * @param enNode
	 */
	private void StartRouteSearch(PlanNode stNode, PlanNode enNode) {
		route = null;
		baiduMap.clear();  //每次重新搜索都清空地图上的所有标记以及路线

		if (searchType == SearchType.BUS) {
			mSearch.drivingSearch((new DrivingRoutePlanOption()).from(stNode).to(enNode)); //搜索驾车路线
		} else if (searchType == SearchType.CAR) {
			mSearch.transitSearch((new TransitRoutePlanOption()).from(stNode).city("无锡").to(enNode));//搜索公交路线
		} else if (searchType == SearchType.WALK) {
			mSearch.walkingSearch((new WalkingRoutePlanOption()).from(stNode).to(enNode));//搜索行走路线
		}
	}


这里的三钟搜索方式对应三个不同的回调接口,分别是:


@Override
	public 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) {
			// 起终点或途经点地址有岐义,通过以下接口获取建议查询信息
			// result.getSuggestAddrInfo()
			return;
		}
		if (dRouteResult.error == SearchResult.ERRORNO.NO_ERROR) {
			// nodeIndex = -1;
			route = dRouteResult.getRouteLines().get(0); //获取路线
			DrivingRouteOverlay overlay = new DrivingRouteOverlay(baiduMap);  
			routeOverlay = overlay;
			baiduMap.setOnMarkerClickListener(overlay);
			overlay.setData(dRouteResult.getRouteLines().get(0));//overLay 为在地图上的路径 ,这里为它设置数据
			overlay.addToMap();  //添加到地图
			overlay.zoomToSpan(); 
		}

	}

	@Override
	public void onGetWalkingRouteResult(WalkingRouteResult result) {   
		if (result == null || result.error != SearchResult.ERRORNO.NO_ERROR) {
			Host.showToast(R.string.map_result_error);
		}
		if (result.error == SearchResult.ERRORNO.AMBIGUOUS_ROURE_ADDR) {
			// 起终点或途经点地址有岐义,通过以下接口获取建议查询信息
			// result.getSuggestAddrInfo()
			return;
		}
		if (result.error == SearchResult.ERRORNO.NO_ERROR) {  //同上
			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();
		}

	}

	@Override
	public void onGetTransitRouteResult(TransitRouteResult result) {

		if (result == null || result.error != SearchResult.ERRORNO.NO_ERROR) {
			Host.showToast(R.string.map_result_error);
		}
		if (result.error == SearchResult.ERRORNO.AMBIGUOUS_ROURE_ADDR) {
			// 起终点或途经点地址有岐义,通过以下接口获取建议查询信息
			// result.getSuggestAddrInfo()
			return;
		}
		if (result.error == SearchResult.ERRORNO.NO_ERROR) { //同上
			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();
		}
	}

这样一个基本的百度地图路径搜索就完成了.