【“零起点”百度地图手机SDK】如何添加地图图层+按钮事件+水平垂直布局？

摘要：我们在这一章将学习到如何通过按钮事件来控制地图图层（交通流量图，卫星图）的显示，以及如何对android应用进行水平和垂直布局。

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

系列阅读：

1、【百度地图-安卓SDK】从头开始写android程序
http://www.cnblogs.com/milkmap/archive/2011/11/25/2263475.html 

2、【“零起点”--百度地图手机SDK】如何创建一张地图
http://www.cnblogs.com/milkmap/archive/2012/05/11/2496526.html

3、【“零起点”--百度地图手机SDK】如何使用离线地图？

http://www.cnblogs.com/milkmap/archive/2012/05/21/2511928.html

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

一、水平和垂直布局

1、决定效果

我们要添加两个图层按钮，和一个地图视图。

将按钮群和地图垂直布局，按钮群内部的两个按钮水平布局，如下图：

2、找到并打开布局的xml文件

在工程目录-》res-》layout-》main.xml

3、然后，进行总体的布局。

最外部的layout是vertical垂直的。

按钮群是horizontal水平排布的。

最后一个地图视图横竖都无所谓，因为它要占满整个布局。

<LinearLayout android:orientation="vertical">

    <LinearLayout android:orientation="horizontal">
        <Button/>
        <Button/>
    </LinearLayout>

    <LinearLayout android:orientation="horizontal">
        <com.baidu.mapapi.MapView />
    </LinearLayout>

</LinearLayout>

4、main.xml文件的全部源代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="100px"
    android:orientation="horizontal" >
        <!-- 图层按钮 -->
        <Button
            android:id="@+id/satelliteBTN"
            android:layout_width="150px"
            android:layout_height="100px"
            android:layout_weight="1"
            android:text="卫星图" />
        <Button
            android:id="@+id/trafficBTN"
            android:layout_width="150px"
            android:layout_height="100px"
            android:layout_weight="1"
            android:text="交通流量" />    
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
        <!-- 地图控件 -->
        <com.baidu.mapapi.MapView
            android:id="@+id/bmapsView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:clickable="true" >
        </com.baidu.mapapi.MapView>
    </LinearLayout>
</LinearLayout>

二、地图图层

根据官网的开发指南，大家可以很容易地在开发指南里找到关于图层的代码。

mMapView.setSatellite(true); //卫星图
mMapView.setTraffic(true); //交通流量

哈哈，实在是太简单了！

直接添加这两句话，可以让交通流量和卫星图的图层直接显示出来。

下面我们来添加按钮的事件，使得点击按钮后，出现卫星图，或是交通流量图。

三、按钮事件

以卫星图为例，我们来为按钮添加事件。

1、在布局xml文件中指定按钮的id。

xml文件的位置在本文开头已经说过了。

<Button
android:id="@+id/satelliteBTN"
android:layout_width="150px"
android:layout_height="100px"
android:layout_weight="1"
android:text="卫星图" />

2、找到主java文件

工程名-》src-》com.baidu.searchpoi-》SearchPOIActivity.java

3、申明变量

在activity里面内先写申明

Button satelliteBtn = null; //卫星图按钮

4、添加按钮事件

在oncreate函数里写按钮事件

/** 卫星图按钮 **/
        satelliteBtn = (Button)findViewById(R.id.satelliteBTN);  //指定按钮的id
        OnClickListener clickListener = new OnClickListener(){
            public void onClick(View v) {
                mMapView.setSatellite(true); //卫星图
            }
        };
        satelliteBtn.setOnClickListener(clickListener);

5、效果

ok 运行一下。点击卫星图按钮后，卫星图就展示出来了。

6、交通流量图

同理，可以制作出交通流量图。注意变量名称不要重复，ID不要重复，事件的名称也不要重复。

交通流量的效果图如下：

7、java文件全部源代码

package com.baidu.searchpoi;

import android.app.Activity;
import android.os.Bundle;

/** 引入类 **/
import java.util.ArrayList;
import java.util.List;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.location.Location;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
 
import com.baidu.mapapi.BMapManager;
import com.baidu.mapapi.GeoPoint;
import com.baidu.mapapi.ItemizedOverlay;
import com.baidu.mapapi.LocationListener;
import com.baidu.mapapi.MKAddrInfo;
import com.baidu.mapapi.MKDrivingRouteResult;
import com.baidu.mapapi.MKGeneralListener;
import com.baidu.mapapi.MKLocationManager;
import com.baidu.mapapi.MKOLUpdateElement;
import com.baidu.mapapi.MKOfflineMap;
import com.baidu.mapapi.MKOfflineMapListener;
import com.baidu.mapapi.MKPlanNode;
import com.baidu.mapapi.MKPoiResult;
import com.baidu.mapapi.MKSearch;
import com.baidu.mapapi.MKSearchListener;
import com.baidu.mapapi.MKTransitRouteResult;
import com.baidu.mapapi.MKWalkingRouteResult;
import com.baidu.mapapi.MapActivity;
import com.baidu.mapapi.MapController;
import com.baidu.mapapi.MapView;
import com.baidu.mapapi.MyLocationOverlay;
import com.baidu.mapapi.Overlay;
import com.baidu.mapapi.OverlayItem;
import com.baidu.mapapi.PoiOverlay;
import com.baidu.mapapi.RouteOverlay;
import com.baidu.mapapi.TransitOverlay;

/** activity **/
public class SearchPOIActivity extends MapActivity {
    //申明变量
    BMapManager mBMapMan = null;  
    MapView mMapView = null; 
    MKOfflineMap mOffline = null;   //离线地图变量
    Button satelliteBtn = null; //卫星图按钮
    Button trafficBtn = null;   //交通流量按钮
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mBMapMan = new BMapManager(getApplication());
        mBMapMan.init("4AA2949E616E069C37CDC3152E8C401A05A0035D", null);
        super.initMapActivity(mBMapMan);
         
        mMapView = (MapView) findViewById(R.id.bmapsView);
        mMapView.setBuiltInZoomControls(true);  //设置启用内置的缩放控件
         
        MapController mMapController = mMapView.getController();  // 得到mMapView的控制权,可以用它控制和驱动平移和缩放
        GeoPoint point = new GeoPoint((int) (39.93 * 1E6),
                (int) (116.42 * 1E6));  //用给定的经纬度构造一个GeoPoint，单位是微度 (度 * 1E6)
        mMapController.setCenter(point);  //设置地图中心点
        mMapController.setZoom(13);    //设置地图zoom级别
        
        /** 离线地图初始化  **/
        mOffline = new MKOfflineMap();
        mOffline.init(mBMapMan, new MKOfflineMapListener() {
            public void onGetOfflineMapState(int type, int state) {
                switch (type) {
                case MKOfflineMap.TYPE_DOWNLOAD_UPDATE:
                    {
                        MKOLUpdateElement update = mOffline.getUpdateInfo(state);
                        //mText.setText(String.format("%s : %d%%", update.cityName, update.ratio));
                    }
                    break;
                case MKOfflineMap.TYPE_NEW_OFFLINE:
                    Log.d("OfflineDemo", String.format("add offlinemap num:%d", state));
                    break;
                case MKOfflineMap.TYPE_VER_UPDATE:
                    Log.d("OfflineDemo", String.format("new offlinemap ver"));
                    break;
                }    
                  }
        }
        );
        /** 离线地图导入离线包 **/
        int num = mOffline.scan();
        //if (num != 0)   mText.setText(String.format("已安装%d个离线包", num));
        
        /** 卫星图按钮 **/
        satelliteBtn = (Button)findViewById(R.id.satelliteBTN);  //指定按钮的id
        OnClickListener clickListener = new OnClickListener(){
            public void onClick(View v) {
                mMapView.setSatellite(true); //卫星图
            }
        };
        satelliteBtn.setOnClickListener(clickListener);
        
        /** 交通流量按钮 **/
        trafficBtn = (Button)findViewById(R.id.trafficBTN);  //指定按钮的id
        OnClickListener clickListener2 = new OnClickListener(){
            public void onClick(View v) {
                mMapView.setTraffic(true); //交通流量
            }
        };
        trafficBtn.setOnClickListener(clickListener2);
    }
 
    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
    
    @Override
    protected void onDestroy() {
        if (mBMapMan != null) {
            mBMapMan.destroy();
            mBMapMan = null;
        }
        super.onDestroy();
    }
    
    @Override
    protected void onPause() {
        if (mBMapMan != null) {
            mBMapMan.stop();
        }
        super.onPause();
    }
    
    @Override
    protected void onResume() {
        if (mBMapMan != null) {
            mBMapMan.start();
        }
        super.onResume();
    }

  
}

    

注意，以上代码保留了上一章中讲述的“离线地图”。