【“零起點”--百度地圖手機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();
    }

  
}

    

 

 

注意，以上代碼保留了上一章中講述的“離線地圖”。