【“零起点”--百度地图手机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(); }
}
注意，以上代码保留了上一章中讲述的“离线地图”。
