Android 百度地图开发（三）

实现比例尺功能和替换自带的缩放组件

ScaleView是比例尺控件，ZoomControlView是缩放控件，MainActivity就是我们的主界面了

先看下ZoomControlView类，代码如下

[java]  view plain copy

1. package com.example.baidumapdemo;  
2.   
3. import com.baidu.mapapi.map.MapView;  
4.   
5. import android.content.Context;  
6. import android.util.AttributeSet;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.widget.Button;  
10. import android.widget.RelativeLayout;  
11. import android.view.View.OnClickListener;  
12.   
13. public class ZoomControlView extends RelativeLayout implements OnClickListener{  
14.     private Button mButtonZoomin;  
15.     private Button mButtonZoomout;  
16.     private MapView mapView;  
17.     private int maxZoomLevel;  
18.     private int minZoomLevel;  
19.       
20.     public ZoomControlView(Context context, AttributeSet attrs) {  
21.         this(context, attrs, 0);  
22.     }  
23.   
24.     public ZoomControlView(Context context, AttributeSet attrs, int defStyle) {  
25.         super(context, attrs, defStyle);  
26.         init();  
27.     }  
28.   
29.       
30.     private void init() {  
31.         View view = LayoutInflater.from(getContext()).inflate(R.layout.zoom_controls_layout, null);  
32.         mButtonZoomin = (Button) view.findViewById(R.id.zoomin);  
33.         mButtonZoomout = (Button) view.findViewById(R.id.zoomout);  
34.         mButtonZoomin.setOnClickListener(this);  
35.         mButtonZoomout.setOnClickListener(this);  
36.         addView(view);  
37.     }  
38.   
39.     @Override  
40.     public void onClick(View v) {  
41.         if(mapView == null){  
42.             throw new NullPointerException("you can call setMapView(MapView mapView) at first");  
43.         }  
44.         switch (v.getId()) {  
45.         case R.id.zoomin:{  
46.             mapView.getController().zoomIn();  
47.             break;  
48.         }  
49.         case R.id.zoomout:{  
50.             mapView.getController().zoomOut();  
51.             break;  
52.         }  
53.         }  
54.     }  
55.   
56.     /** 
57.      * 与MapView设置关联 
58.      * @param mapView 
59.      */  
60.     public void setMapView(MapView mapView) {  
61.         this.mapView = mapView;  
62.         // 获取最大的缩放级别  
63.         maxZoomLevel = mapView.getMaxZoomLevel();  
64.         // 获取最大的缩放级别  
65.         minZoomLevel = mapView.getMinZoomLevel();  
66.     }  
67.       
68.       
69.     /** 
70.      * 根据MapView的缩放级别更新缩放按钮的状态，当达到最大缩放级别，设置mButtonZoomin 
71.      * 为不能点击，反之设置mButtonZoomout 
72.      * @param level 
73.      */  
74.     public void refreshZoomButtonStatus(int level){  
75.         if(mapView == null){  
76.             throw new NullPointerException("you can call setMapView(MapView mapView) at first");  
77.         }  
78.         if(level > minZoomLevel && level < maxZoomLevel){  
79.             if(!mButtonZoomout.isEnabled()){  
80.                 mButtonZoomout.setEnabled(true);  
81.             }  
82.             if(!mButtonZoomin.isEnabled()){   
83.                 mButtonZoomin.setEnabled(true);  
84.             }  
85.         }  
86.         else if(level == minZoomLevel ){  
87.             mButtonZoomout.setEnabled(false);  
88.         }  
89.         else if(level == maxZoomLevel){  
90.             mButtonZoomin.setEnabled(false);  
91.         }  
92.     }  
93.   
94. }  

这个类封装好了地图的缩放功能，里面主要是两个按钮，一个按钮是放大MapView，当放大到了MapView的最大缩放级别，设置此按钮的Enable为false，另一个按钮缩小MapView，当缩小到了MapView最小的缩放级别，设置此按钮的Enable为false，refreshZoomButtonStatus()方法就是实现了此功能，我们根据MapView的缩放级别来更新按钮的状态，我们还必须调用setMapView(MapView mapView)方法来设置ZoomControlView与MapView关联，ZoomControlView的布局文件zoom_controls_layout我就不贴出来了，里面就两个按钮，然后给按钮设置背景选择器seletor

ScaleView类的代码如下

[java]  view plain copy

1. <span style="font-family:System;font-size:12px;">package com.example.baidumapdemo;  
2.   
3. import com.baidu.mapapi.map.MapView;  
4. import com.baidu.platform.comapi.basestruct.GeoPoint;  
5.   
6. import android.annotation.SuppressLint;  
7. import android.content.Context;  
8. import android.graphics.Bitmap;  
9. import android.graphics.BitmapFactory;  
10. import android.graphics.Canvas;  
11. import android.graphics.Color;  
12. import android.graphics.NinePatch;  
13. import android.graphics.Paint;  
14. import android.graphics.Rect;  
15. import android.graphics.Typeface;  
16. import android.util.AttributeSet;  
17. import android.view.View;  
18.   
19. public class ScaleView extends View {  
20.     private Paint mPaint;  
21.     /** 
22.      * 比例尺的宽度 
23.      */  
24.     private int scaleWidth;  
25.     /** 
26.      * 比例尺的高度 
27.      */  
28.     private int scaleHeight = 4;  
29.     /** 
30.      * 比例尺上面字体的颜色 
31.      */  
32.     private int textColor = Color.BLACK;  
33.     /** 
34.      * 比例尺上边的字体 
35.      */  
36.     private String text;  
37.     /** 
38.      * 字体大小 
39.      */  
40.     private int textSize = 16;  
41.     /** 
42.      * 比例尺与字体间的距离 
43.      */  
44.     private int scaleSpaceText = 8;  
45.     /** 
46.      * 百度地图最大缩放级别 
47.      */  
48.     private static final int MAX_LEVEL = 19;  
49.     /** 
50.      * 各级比例尺分母值数组 
51.      */  
52.     private static final int[] SCALES = {20, 50, 100, 200, 500, 1000, 2000,  
53.             5000, 10000, 20000, 25000, 50000, 100000, 200000, 500000, 1000000,  
54.             2000000 };  
55.     /** 
56.      * 各级比例尺上面的文字数组 
57.      */  
58.     private static final String[] SCALE_DESCS = { "20米", "50米", "100米", "200米",  
59.             "500米", "1公里", "2公里", "5公里", "10公里", "20公里", "25公里", "50公里",  
60.             "100公里", "200公里", "500公里", "1000公里", "2000公里" };  
61.       
62.     private MapView mapView;  
63.       
64.       
65.   
66.     /** 
67.      * 与MapView设置关联 
68.      * @param mapView 
69.      */  
70.     public void setMapView(MapView mapView) {  
71.         this.mapView = mapView;  
72.     }  
73.   
74.     public ScaleView(Context context) {  
75.         this(context, null);  
76.     }  
77.       
78.     public ScaleView(Context context, AttributeSet attrs) {  
79.         this(context, attrs, 0);  
80.     }  
81.   
82.     public ScaleView(Context context, AttributeSet attrs, int defStyle) {  
83.         super(context, attrs, defStyle);  
84.         mPaint = new Paint();  
85.     }  
86.   
87.       
88.     /** 
89.      * 绘制上面的文字和下面的比例尺，因为比例尺是.9.png，我们需要利用drawNinepath方法绘制比例尺 
90.      */  
91.     @SuppressLint("DrawAllocation")  
92.     @Override  
93.     protected void onDraw(Canvas canvas) {  
94.         super.onDraw(canvas);  
95.           
96.         int width = scaleWidth;  
97.           
98.         mPaint.setColor(textColor);  
99.         mPaint.setAntiAlias(true);  
100.         mPaint.setTextSize(textSize);  
101.         mPaint.setTypeface(Typeface.DEFAULT_BOLD);  
102.         float textWidth = mPaint.measureText(text);  
103.           
104.         canvas.drawText(text, (width - textWidth) / 2, textSize, mPaint);  
105.           
106.         Rect scaleRect = new Rect(0, textSize + scaleSpaceText, scaleWidth, textSize + scaleSpaceText + scaleHeight);  
107.         drawNinepath(canvas, R.drawable.icon_scale, scaleRect);  
108.     }  
109.       
110.     /** 
111.      * 手动绘制.9.png图片 
112.      * @param canvas 
113.      * @param resId 
114.      * @param rect 
115.      */  
116.     private void drawNinepath(Canvas canvas, int resId, Rect rect){    
117.         Bitmap bmp= BitmapFactory.decodeResource(getResources(), resId);    
118.         NinePatch patch = new NinePatch(bmp, bmp.getNinePatchChunk(), null);    
119.         patch.draw(canvas, rect);    
120.     }  
121.   
122.       
123.   
124.     /** 
125.      * 测量ScaleView的方法， 
126.      */  
127.     @Override  
128.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
129.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
130.         int widthSize = getWidthSize(widthMeasureSpec);  
131.         int heightSize = getHeightSize(heightMeasureSpec);  
132.         setMeasuredDimension(widthSize, heightSize);  
133.     }  
134.       
135.     /** 
136.      * 测量ScaleView的宽度 
137.      * @param widthMeasureSpec 
138.      * @return 
139.      */  
140.     private int getWidthSize(int widthMeasureSpec){  
141.         return MeasureSpec.getSize(widthMeasureSpec);  
142.     }  
143.       
144.     /** 
145.      * 测量ScaleView的高度 
146.      * @param widthMeasureSpec 
147.      * @return 
148.      */  
149.     private int getHeightSize(int heightMeasureSpec){  
150.         int mode = MeasureSpec.getMode(heightMeasureSpec);  
151.         int height = 0;  
152.         switch (mode) {  
153.         case MeasureSpec.AT_MOST:  
154.             height = textSize + scaleSpaceText + scaleHeight;  
155.             break;  
156.         case MeasureSpec.EXACTLY:{  
157.             height = MeasureSpec.getSize(heightMeasureSpec);  
158.             break;  
159.         }  
160.         case MeasureSpec.UNSPECIFIED:{  
161.             height = Math.max(textSize + scaleSpaceText + scaleHeight, MeasureSpec.getSize(heightMeasureSpec));  
162.             break;  
163.         }  
164.         }  
165.           
166.         return height;  
167.     }  
168.       
169.     /** 
170.      * 根据缩放级别，得到对应比例尺在SCALES数组中的位置（索引） 
171.      * @param zoomLevel 
172.      * @return 
173.      */  
174.     private static int getScaleIndex(int zoomLevel) {  
175.         return MAX_LEVEL - zoomLevel;  
176.     }  
177.   
178.     /** 
179.      * 根据缩放级别，得到对应比例尺 
180.      *  
181.      * @param zoomLevel 
182.      * @return 
183.      */  
184.     public static int getScale(int zoomLevel) {  
185.         return SCALES[getScaleIndex(zoomLevel)];  
186.     }  
187.   
188.     /** 
189.      *  根据缩放级别，得到对应比例尺文字 
190.      * @param zoomLevel 
191.      * @return 
192.      */  
193.     public static String getScaleDesc(int zoomLevel) {  
194.         return SCALE_DESCS[getScaleIndex(zoomLevel)];  
195.     }  
196.   
197.       
198.     /** 
199.      * 根据地图当前中心位置的纬度，当前比例尺，得出比例尺图标应该显示多长（多少像素） 
200.      * @param map 
201.      * @param scale 
202.      * @return 
203.      */  
204.     public static int meterToPixels(MapView map, int scale) {  
205.         // 得到当前中心位置对象  
206.         GeoPoint geoPoint = map.getMapCenter();  
207.         // 得到当前中心位置纬度  
208.         double latitude = geoPoint.getLatitudeE6() / 1E6;  
209.         // 得到象素数，比如当前比例尺是1/10000，比如scale=10000，对应在该纬度应在地图中绘多少象素  
210.         // 参考http://rainbow702.iteye.com/blog/1124244  
211.         return (int) (map.getProjection().metersToEquatorPixels(scale) / (Math  
212.                 .cos(Math.toRadians(latitude))));  
213.           
214.           
215.     }  
216.   
217.     /** 
218.      * 设置比例尺的宽度 
219.      * @param scaleWidth 
220.      */  
221.     public  void setScaleWidth(int scaleWidth) {  
222.         this.scaleWidth = scaleWidth;  
223.     }  
224.   
225.     /** 
226.      * 设置比例尺的上面的 text 例如 200公里 
227.      * @param text 
228.      */  
229.     private void setText(String text) {  
230.         this.text = text;  
231.     }  
232.   
233.     /** 
234.      * 设置字体大小 
235.      * @param textSize 
236.      */  
237.     public void setTextSize(int textSize) {  
238.         this.textSize = textSize;  
239.         invalidate();  
240.     }  
241.       
242.       
243.     /** 
244.      * 根据缩放级别更新ScaleView的文字以及比例尺的长度 
245.      * @param level 
246.      */  
247.     public void refreshScaleView(int level) {  
248.         if(mapView == null){  
249.             throw new NullPointerException("you can call setMapView(MapView mapView) at first");  
250.         }  
251.         setText(getScaleDesc(level));  
252.         setScaleWidth(meterToPixels(mapView, getScale(level)));  
253.         invalidate();  
254.     }  
255.   
256. }</span>  

ScaleView是比例尺控件类，主要是提供比例尺的绘制功能，在onDraw(Canvas canvas)的方法中绘制上面的距离和下面的比例尺长度，这里面要说下drawNinepath()方法，因为我们的比例尺图片是.9.png格式的，保证图片拉伸状态下不变形，如果用平常绘制一般图片的方法会报ClassCastException，所以我们可以利用drawNinepath()来手动绘制.9.png格式的图片，我们比例尺的长度是变化的，我们需要将以米为计量单位的距离（沿赤道）在当前缩放水平下转换到一个以像素（水平）为计量单位的距离，meterToPixels()方法根据我们MapView当前的缩放级别，得出比例尺图标应该显示多长，refreshScaleView()是用来更新ScaleView的，更新上面的字符串和下面比例尺的长度，当然我们也必须调用setMapView(MapView mapView)方法来设置ScaleView与MapView关联

接下来我们就来使用我们的比例尺控件和缩放控件了，先看下布局

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" >  
5.   
6.     <com.baidu.mapapi.map.MapView  
7.         android:id="@+id/bmapView"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:clickable="true" />  
11.   
12.     <com.example.baidumapdemo.ZoomControlView  
13.         android:id="@+id/ZoomControlView"  
14.         android:layout_width="wrap_content"  
15.         android:layout_height="wrap_content"  
16.         android:layout_alignParentBottom="true"  
17.         android:layout_alignParentRight="true"  
18.         android:layout_marginBottom="20.0dip"  
19.         android:layout_marginRight="5.0dip"/>  
20.   
21.     <com.example.baidumapdemo.ScaleView  
22.         android:id="@+id/scaleView"  
23.         android:layout_width="wrap_content"  
24.         android:layout_height="wrap_content"  
25.         android:layout_alignParentBottom="true"  
26.         android:layout_alignParentLeft="true"  
27.         android:layout_marginBottom="40dp"  
28.         android:layout_marginLeft="20dp" />  
29.   
30. </RelativeLayout>  

主界面MainActivity的代码如下

[java]  view plain copy

1. package com.example.baidumapdemo;  
2.   
3. import android.app.Activity;  
4. import android.graphics.Bitmap;  
5. import android.os.Bundle;  
6. import android.widget.Toast;  
7.   
8. import com.baidu.mapapi.BMapManager;  
9. import com.baidu.mapapi.MKGeneralListener;  
10. import com.baidu.mapapi.map.MKEvent;  
11. import com.baidu.mapapi.map.MKMapViewListener;  
12. import com.baidu.mapapi.map.MapController;  
13. import com.baidu.mapapi.map.MapPoi;  
14. import com.baidu.mapapi.map.MapView;  
15. import com.baidu.platform.comapi.basestruct.GeoPoint;  
16.   
17. public class MainActivity extends Activity{  
18.     private BMapManager mBMapManager;  
19.     /** 
20.      * MapView 是地图主控件 
21.      */  
22.     private MapView mMapView = null;  
23.     /** 
24.      * 用MapController完成地图控制 
25.      */  
26.     private MapController mMapController = null;  
27.       
28.     private ScaleView mScaleView;  
29.     private ZoomControlView mZoomControlView;  
30.       
31.     @Override  
32.     protected void onCreate(Bundle savedInstanceState) {  
33.         super.onCreate(savedInstanceState);  
34.           
35.         //使用地图sdk前需先初始化BMapManager，这个必须在setContentView()先初始化  
36.         mBMapManager = new BMapManager(this);  
37.           
38.         //第一个参数是API key,  
39.         //第二个参数是常用事件监听，用来处理通常的网络错误，授权验证错误等，你也可以不添加这个回调接口  
40.         mBMapManager.init("CC61ac7527b65c95899608810873b173", new MKGeneralListener() {  
41.               
42.             //授权错误的时候调用的回调函数  
43.             @Override  
44.             public void onGetPermissionState(int iError) {  
45.                 if (iError ==  MKEvent.ERROR_PERMISSION_DENIED) {  
46.                     Toast.makeText(getApplication(), "API Key错误，请检查！",  
47.                             Toast.LENGTH_LONG).show();  
48.                 }  
49.             }  
50.               
51.             //一些网络状态的错误处理回调函数  
52.             @Override  
53.             public void onGetNetworkState(int iError) {  
54.                 if (iError == MKEvent.ERROR_NETWORK_CONNECT) {  
55.                     Toast.makeText(getApplication(), "您的网络出错啦！",  
56.                         Toast.LENGTH_LONG).show();  
57.                 }  
58.             }  
59.         });  
60.           
61.         setContentView(R.layout.activity_main);  
62.         mMapView = (MapView) findViewById(R.id.bmapView);  
63.         //隐藏自带的地图缩放控件  
64.         mMapView.setBuiltInZoomControls(false);  
65.           
66.         mScaleView = (ScaleView) findViewById(R.id.scaleView);  
67.         mScaleView.setMapView(mMapView);  
68.         mZoomControlView = (ZoomControlView) findViewById(R.id.ZoomControlView);  
69.         mZoomControlView.setMapView(mMapView);  
70.           
71.           
72.         //地图显示事件监听器。 该接口监听地图显示事件，用户需要实现该接口以处理相应事件。  
73.         mMapView.regMapViewListener(mBMapManager, new MKMapViewListener() {  
74.               
75.             @Override  
76.             public void onMapMoveFinish() {  
77.                  refreshScaleAndZoomControl();  
78.             }  
79.               
80.             @Override  
81.             public void onMapLoadFinish() {  
82.                   
83.             }  
84.               
85.               
86.               
87.             /** 
88.              * 动画结束时会回调此消息.我们在此方法里面更新缩放按钮的状态 
89.              */  
90.             @Override  
91.             public void onMapAnimationFinish() {  
92.                  refreshScaleAndZoomControl();  
93.             }  
94.               
95.             @Override  
96.             public void onGetCurrentMap(Bitmap arg0) {  
97.                   
98.             }  
99.               
100.             @Override  
101.             public void onClickMapPoi(MapPoi arg0) {  
102.                   
103.             }  
104.         });  
105.           
106.         //获取地图控制器  
107.         mMapController = mMapView.getController();  
108.         //设置地图是否响应点击事件  .  
109.         mMapController.enableClick(true);  
110.         //设置地图缩放级别  
111.         mMapController.setZoom(14);  
112.           
113.         refreshScaleAndZoomControl();  
114.           
115.         //保存精度和纬度的类,  
116.         GeoPoint p = new GeoPoint((int)(22.547923 * 1E6), (int)(114.067368 * 1E6));  
117.         //设置p地方为中心点  
118.         mMapController.setCenter(p);  
119.           
120.     }  
121.   
122.       
123.       
124.     private void refreshScaleAndZoomControl(){  
125.         //更新缩放按钮的状态  
126.         mZoomControlView.refreshZoomButtonStatus(Math.round(mMapView.getZoomLevel()));  
127.         mScaleView.refreshScaleView(Math.round(mMapView.getZoomLevel()));  
128.     }  
129.       
130.       
131.     @Override  
132.     protected void onResume() {  
133.         //MapView的生命周期与Activity同步，当activity挂起时需调用MapView.onPause()  
134.         mMapView.onResume();  
135.         super.onResume();  
136.     }  
137.   
138.   
139.   
140.     @Override  
141.     protected void onPause() {  
142.         //MapView的生命周期与Activity同步，当activity挂起时需调用MapView.onPause()  
143.         mMapView.onPause();  
144.         super.onPause();  
145.     }  
146.   
147.     @Override  
148.     protected void onDestroy() {  
149.         //MapView的生命周期与Activity同步，当activity销毁时需调用MapView.destroy()  
150.         mMapView.destroy();  
151.           
152.         //退出应用调用BMapManager的destroy()方法  
153.         if(mBMapManager != null){  
154.             mBMapManager.destroy();  
155.             mBMapManager = null;  
156.         }  
157.           
158.         super.onDestroy();  
159.           
160.     }  
161.   
162. }  

主界面的代码还是比较简单的，主要是利用MapView的regMapViewListener()来注册地图显示事件监听器。 该接口监听地图显示事件，用户需要实现该接口以处理相应事件，分别在回调方法onMapAnimationFinish()和onMapMoveFinish()来更新ZoomControlView和ScaleView的一些状态

在运行之前需要在Manifest中加入相对应的权限问题

[java]  view plain copy

1. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />    
2. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />    
3. <uses-permission android:name="android.permission.INTERNET" />    
4. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />    
5. <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />    
6. <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />    
7. <uses-permission android:name="android.permission.READ_PHONE_STATE" />  

运行结果

好了，今天的讲解到此结束，有疑问的朋友请在下面留言！