Android 百度地图开发（三）--- 实现比例尺功能和替换自带的缩放组件
转载请注明出处：http://blog.csdn.net/xiaanming/article/details/11821523
貌似有些天没有写博客了，前段时间在忙找工作的事，面试了几家公司，表示反响还不错，过完国庆节去新公司报道，期待新的公司，新的同事，而且新公司还有很多女孩子，哈哈，我可是一年多没和女孩子一起工作过了，之前的公司全是男的，你没听错，真的全是男的，我还以为我自己不会在爱了，现在Android市场还可以，想要跳槽换工作的赶紧，过了这个村就没这个店了，还有就是恭喜自己成了博客专家了，很开心也很感谢CSDN给我这份荣誉，我会继续写出对大家有用的博文，感谢大家的支持，今天继续给大家带来百度地图开发系列三 ，实现比例尺功能和替换自带的缩放组件，先看下项目工程结构
ScaleView是比例尺控件，ZoomControlView是缩放控件，MainActivity就是我们的主界面了
先看下ZoomControlView类，代码如下
package com.example.baidumapdemo; import com.baidu.mapapi.map.MapView; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.widget.Button; import android.widget.RelativeLayout; import android.view.View.OnClickListener; public class ZoomControlView extends RelativeLayout implements OnClickListener{ private Button mButtonZoomin; private Button mButtonZoomout; private MapView mapView; private int maxZoomLevel; private int minZoomLevel; public ZoomControlView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ZoomControlView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { View view = LayoutInflater.from(getContext()).inflate(R.layout.zoom_controls_layout, null); mButtonZoomin = (Button) view.findViewById(R.id.zoomin); mButtonZoomout = (Button) view.findViewById(R.id.zoomout); mButtonZoomin.setOnClickListener(this); mButtonZoomout.setOnClickListener(this); addView(view); } @Override public void onClick(View v) { if(mapView == null){ throw new NullPointerException("you can call setMapView(MapView mapView) at first"); } switch (v.getId()) { case R.id.zoomin:{ mapView.getController().zoomIn(); break; } case R.id.zoomout:{ mapView.getController().zoomOut(); break; } } } /** * 与MapView设置关联 * @param mapView */ public void setMapView(MapView mapView) { this.mapView = mapView; // 获取最大的缩放级别 maxZoomLevel = mapView.getMaxZoomLevel(); // 获取最大的缩放级别 minZoomLevel = mapView.getMinZoomLevel(); } /** * 根据MapView的缩放级别更新缩放按钮的状态，当达到最大缩放级别，设置mButtonZoomin * 为不能点击，反之设置mButtonZoomout * @param level */ public void refreshZoomButtonStatus(int level){ if(mapView == null){ throw new NullPointerException("you can call setMapView(MapView mapView) at first"); } if(level > minZoomLevel && level < maxZoomLevel){ if(!mButtonZoomout.isEnabled()){ mButtonZoomout.setEnabled(true); } if(!mButtonZoomin.isEnabled()){ mButtonZoomin.setEnabled(true); } } else if(level == minZoomLevel ){ mButtonZoomout.setEnabled(false); } else if(level == maxZoomLevel){ mButtonZoomin.setEnabled(false); } } }
这个类封装好了地图的缩放功能，里面主要是两个按钮，一个按钮是放大MapView，当放大到了MapView的最大缩放级别，设置此按钮的Enable为false，另一个按钮缩小MapView，当缩小到了MapView最小的缩放级别，设置此按钮的Enable为false，refreshZoomButtonStatus()方法就是实现了此功能，我们根据MapView的缩放级别来更新按钮的状态，我们还必须调用setMapView(MapView mapView)方法来设置ZoomControlView与MapView关联，ZoomControlView的布局文件zoom_controls_layout我就不贴出来了，里面就两个按钮，然后给按钮设置背景选择器seletor
ScaleView类的代码如下
<span style="font-family:System;font-size:12px;">package com.example.baidumapdemo; import com.baidu.mapapi.map.MapView; import com.baidu.platform.comapi.basestruct.GeoPoint; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.NinePatch; import android.graphics.Paint; import android.graphics.Rect; import android.graphics.Typeface; import android.util.AttributeSet; import android.view.View; public class ScaleView extends View { private Paint mPaint; /** * 比例尺的宽度 */ private int scaleWidth; /** * 比例尺的高度 */ private int scaleHeight = 4; /** * 比例尺上面字体的颜色 */ private int textColor = Color.BLACK; /** * 比例尺上边的字体 */ private String text; /** * 字体大小 */ private int textSize = 16; /** * 比例尺与字体间的距离 */ private int scaleSpaceText = 8; /** * 百度地图最大缩放级别 */ private static final int MAX_LEVEL = 19; /** * 各级比例尺分母值数组 */ private static final int[] SCALES = {20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 25000, 50000, 100000, 200000, 500000, 1000000, 2000000 }; /** * 各级比例尺上面的文字数组 */ private static final String[] SCALE_DESCS = { "20米", "50米", "100米", "200米", "500米", "1公里", "2公里", "5公里", "10公里", "20公里", "25公里", "50公里", "100公里", "200公里", "500公里", "1000公里", "2000公里" }; private MapView mapView; /** * 与MapView设置关联 * @param mapView */ public void setMapView(MapView mapView) { this.mapView = mapView; } public ScaleView(Context context) { this(context, null); } public ScaleView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ScaleView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); mPaint = new Paint(); } /** * 绘制上面的文字和下面的比例尺，因为比例尺是.9.png，我们需要利用drawNinepath方法绘制比例尺 */ @SuppressLint("DrawAllocation") @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = scaleWidth; mPaint.setColor(textColor); mPaint.setAntiAlias(true); mPaint.setTextSize(textSize); mPaint.setTypeface(Typeface.DEFAULT_BOLD); float textWidth = mPaint.measureText(text); canvas.drawText(text, (width - textWidth) / 2, textSize, mPaint); Rect scaleRect = new Rect(0, textSize + scaleSpaceText, scaleWidth, textSize + scaleSpaceText + scaleHeight); drawNinepath(canvas, R.drawable.icon_scale, scaleRect); } /** * 手动绘制.9.png图片 * @param canvas * @param resId * @param rect */ private void drawNinepath(Canvas canvas, int resId, Rect rect){ Bitmap bmp= BitmapFactory.decodeResource(getResources(), resId); NinePatch patch = new NinePatch(bmp, bmp.getNinePatchChunk(), null); patch.draw(canvas, rect); } /** * 测量ScaleView的方法， */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthSize = getWidthSize(widthMeasureSpec); int heightSize = getHeightSize(heightMeasureSpec); setMeasuredDimension(widthSize, heightSize); } /** * 测量ScaleView的宽度 * @param widthMeasureSpec * @return */ private int getWidthSize(int widthMeasureSpec){ return MeasureSpec.getSize(widthMeasureSpec); } /** * 测量ScaleView的高度 * @param widthMeasureSpec * @return */ private int getHeightSize(int heightMeasureSpec){ int mode = MeasureSpec.getMode(heightMeasureSpec); int height = 0; switch (mode) { case MeasureSpec.AT_MOST: height = textSize + scaleSpaceText + scaleHeight; break; case MeasureSpec.EXACTLY:{ height = MeasureSpec.getSize(heightMeasureSpec); break; } case MeasureSpec.UNSPECIFIED:{ height = Math.max(textSize + scaleSpaceText + scaleHeight, MeasureSpec.getSize(heightMeasureSpec)); break; } } return height; } /** * 根据缩放级别，得到对应比例尺在SCALES数组中的位置（索引） * @param zoomLevel * @return */ private static int getScaleIndex(int zoomLevel) { return MAX_LEVEL - zoomLevel; } /** * 根据缩放级别，得到对应比例尺 * * @param zoomLevel * @return */ public static int getScale(int zoomLevel) { return SCALES[getScaleIndex(zoomLevel)]; } /** * 根据缩放级别，得到对应比例尺文字 * @param zoomLevel * @return */ public static String getScaleDesc(int zoomLevel) { return SCALE_DESCS[getScaleIndex(zoomLevel)]; } /** * 根据地图当前中心位置的纬度，当前比例尺，得出比例尺图标应该显示多长（多少像素） * @param map * @param scale * @return */ public static int meterToPixels(MapView map, int scale) { // 得到当前中心位置对象 GeoPoint geoPoint = map.getMapCenter(); // 得到当前中心位置纬度 double latitude = geoPoint.getLatitudeE6() / 1E6; // 得到象素数，比如当前比例尺是1/10000，比如scale=10000，对应在该纬度应在地图中绘多少象素 // 参考http://rainbow702.iteye.com/blog/1124244 return (int) (map.getProjection().metersToEquatorPixels(scale) / (Math .cos(Math.toRadians(latitude)))); } /** * 设置比例尺的宽度 * @param scaleWidth */ public void setScaleWidth(int scaleWidth) { this.scaleWidth = scaleWidth; } /** * 设置比例尺的上面的 text 例如 200公里 * @param text */ private void setText(String text) { this.text = text; } /** * 设置字体大小 * @param textSize */ public void setTextSize(int textSize) { this.textSize = textSize; invalidate(); } /** * 根据缩放级别更新ScaleView的文字以及比例尺的长度 * @param level */ public void refreshScaleView(int level) { if(mapView == null){ throw new NullPointerException("you can call setMapView(MapView mapView) at first"); } setText(getScaleDesc(level)); setScaleWidth(meterToPixels(mapView, getScale(level))); invalidate(); } }</span>
ScaleView是比例尺控件类，主要是提供比例尺的绘制功能，在onDraw(Canvas canvas)的方法中绘制上面的距离和下面的比例尺长度，这里面要说下drawNinepath()方法，因为我们的比例尺图片是.9.png格式的，保证图片拉伸状态下不变形，如果用平常绘制一般图片的方法会报ClassCastException，所以我们可以利用drawNinepath()来手动绘制.9.png格式的图片，我们比例尺的长度是变化的，我们需要将以米为计量单位的距离（沿赤道）在当前缩放水平下转换到一个以像素（水平）为计量单位的距离，meterToPixels()方法根据我们MapView当前的缩放级别，得出比例尺图标应该显示多长，refreshScaleView()是用来更新ScaleView的，更新上面的字符串和下面比例尺的长度，当然我们也必须调用setMapView(MapView mapView)方法来设置ScaleView与MapView关联
接下来我们就来使用我们的比例尺控件和缩放控件了，先看下布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.baidu.mapapi.map.MapView android:id="@+id/bmapView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" /> <com.example.baidumapdemo.ZoomControlView android:id="@+id/ZoomControlView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="20.0dip" android:layout_marginRight="5.0dip"/> <com.example.baidumapdemo.ScaleView android:id="@+id/scaleView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_marginBottom="40dp" android:layout_marginLeft="20dp" /> </RelativeLayout>
主界面MainActivity的代码如下
package com.example.baidumapdemo; import android.app.Activity; import android.graphics.Bitmap; import android.os.Bundle; import android.widget.Toast; import com.baidu.mapapi.BMapManager; import com.baidu.mapapi.MKGeneralListener; import com.baidu.mapapi.map.MKEvent; import com.baidu.mapapi.map.MKMapViewListener; import com.baidu.mapapi.map.MapController; import com.baidu.mapapi.map.MapPoi; import com.baidu.mapapi.map.MapView; import com.baidu.platform.comapi.basestruct.GeoPoint; public class MainActivity extends Activity{ private BMapManager mBMapManager; /** * MapView 是地图主控件 */ private MapView mMapView = null; /** * 用MapController完成地图控制 */ private MapController mMapController = null; private ScaleView mScaleView; private ZoomControlView mZoomControlView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //使用地图sdk前需先初始化BMapManager，这个必须在setContentView()先初始化 mBMapManager = new BMapManager(this); //第一个参数是API key, //第二个参数是常用事件监听，用来处理通常的网络错误，授权验证错误等，你也可以不添加这个回调接口 mBMapManager.init("CC61ac7527b65c95899608810873b173", new MKGeneralListener() { //授权错误的时候调用的回调函数 @Override public void onGetPermissionState(int iError) { if (iError == MKEvent.ERROR_PERMISSION_DENIED) { Toast.makeText(getApplication(), "API Key错误，请检查！", Toast.LENGTH_LONG).show(); } } //一些网络状态的错误处理回调函数 @Override public void onGetNetworkState(int iError) { if (iError == MKEvent.ERROR_NETWORK_CONNECT) { Toast.makeText(getApplication(), "您的网络出错啦！", Toast.LENGTH_LONG).show(); } } }); setContentView(R.layout.activity_main); mMapView = (MapView) findViewById(R.id.bmapView); //隐藏自带的地图缩放控件 mMapView.setBuiltInZoomControls(false); mScaleView = (ScaleView) findViewById(R.id.scaleView); mScaleView.setMapView(mMapView); mZoomControlView = (ZoomControlView) findViewById(R.id.ZoomControlView); mZoomControlView.setMapView(mMapView); //地图显示事件监听器。 该接口监听地图显示事件，用户需要实现该接口以处理相应事件。 mMapView.regMapViewListener(mBMapManager, new MKMapViewListener() { @Override public void onMapMoveFinish() { refreshScaleAndZoomControl(); } @Override public void onMapLoadFinish() { } /** * 动画结束时会回调此消息.我们在此方法里面更新缩放按钮的状态 */ @Override public void onMapAnimationFinish() { refreshScaleAndZoomControl(); } @Override public void onGetCurrentMap(Bitmap arg0) { } @Override public void onClickMapPoi(MapPoi arg0) { } }); //获取地图控制器 mMapController = mMapView.getController(); //设置地图是否响应点击事件 . mMapController.enableClick(true); //设置地图缩放级别 mMapController.setZoom(14); refreshScaleAndZoomControl(); //保存精度和纬度的类, GeoPoint p = new GeoPoint((int)(22.547923 * 1E6), (int)(114.067368 * 1E6)); //设置p地方为中心点 mMapController.setCenter(p); } private void refreshScaleAndZoomControl(){ //更新缩放按钮的状态 mZoomControlView.refreshZoomButtonStatus(Math.round(mMapView.getZoomLevel())); mScaleView.refreshScaleView(Math.round(mMapView.getZoomLevel())); } @Override protected void onResume() { //MapView的生命周期与Activity同步，当activity挂起时需调用MapView.onPause() mMapView.onResume(); super.onResume(); } @Override protected void onPause() { //MapView的生命周期与Activity同步，当activity挂起时需调用MapView.onPause() mMapView.onPause(); super.onPause(); } @Override protected void onDestroy() { //MapView的生命周期与Activity同步，当activity销毁时需调用MapView.destroy() mMapView.destroy(); //退出应用调用BMapManager的destroy()方法 if(mBMapManager != null){ mBMapManager.destroy(); mBMapManager = null; } super.onDestroy(); } }
主界面的代码还是比较简单的，主要是利用MapView的regMapViewListener()来注册地图显示事件监听器。 该接口监听地图显示事件，用户需要实现该接口以处理相应事件，分别在回调方法onMapAnimationFinish()和onMapMoveFinish()来更新ZoomControlView和ScaleView的一些状态
在运行之前需要在Manifest中加入相对应的权限问题
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
运行结果
好了，今天的讲解到此结束，有疑问的朋友请在下面留言！
上面的代码有些东西没有贴出来，有兴趣的朋友可以下载源码项目源码，点击下载
