Android 百度地图开发（三）

时间：2023-03-08 22:09:06

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

Android 百度地图开发（三）

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

先看下ZoomControlView类。代码例如以下

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

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

ScaleView类的代码例如以下

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

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

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

[html] view
plaincopyAndroid 百度地图开发（三）Android 百度地图开发（三）
  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. <com.baidu.mapapi.map.MapView
  6. android:id="@+id/bmapView"
  7. android:layout_width="fill_parent"
  8. android:layout_height="fill_parent"
  9. android:clickable="true" />
  10. <com.example.baidumapdemo.ZoomControlView
  11. android:id="@+id/ZoomControlView"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:layout_alignParentBottom="true"
  15. android:layout_alignParentRight="true"
  16. android:layout_marginBottom="20.0dip"
  17. android:layout_marginRight="5.0dip"/>
  18. <com.example.baidumapdemo.ScaleView
  19. android:id="@+id/scaleView"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:layout_alignParentBottom="true"
  23. android:layout_alignParentLeft="true"
  24. android:layout_marginBottom="40dp"
  25. android:layout_marginLeft="20dp" />
  26. </RelativeLayout>

主界面MainActivity的代码例如以下

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

主界面的代码还是比較简单的。主要是利用MapView的regMapViewListener()来注冊地图显示事件监听器。

该接口监听地图显示事件。用户须要实现该接口以处理对应事件，分别在回调方法onMapAnimationFinish()和onMapMoveFinish()来更新ZoomControlView和ScaleView的一些状态

在执行之前须要在Manifest中增加相相应的权限问题

[java] view
plaincopyAndroid 百度地图开发（三）Android 百度地图开发（三）
  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" />

执行结果

Android 百度地图开发（三）Android 百度地图开发（三）

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhYW5taW5n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="240" height="400" hspace="10" alt="" style="border:none; max-width:100%">Android 百度地图开发（三）

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

相关文章