現在一提到地圖很多人就會想到百度地圖高德地圖等SDK，但是公司遇到個專案要做到室內導航，現在的第三方用GPS定位又不準，所以使用了一個自定義的ImageView去實現地圖的功能。該地圖有導航、定位、分級顯示、點選檢視位置詳細資訊的功能。今天我們先說下基礎地圖資料的顯示及分級顯示。

  先說下思路，一、地圖的底圖先要畫好（交給UI畫吧），畫出各個區域，如下圖（忽略那些文字吧，地圖原稿找不到）沒有那些文字的，只有那些有顏色的小格；

  二、伺服器先將每個需要畫名字或者區域的的座標標出來存起來，然後下發給APP；

  三、APP載入完地圖地圖後（記住一定要按比例來）按照服務端拿下來的資料把名字畫上去。

  四、根據手指放大縮小的縮放比例分成三個級別，實現分級別顯示，就像百度地圖那樣放大了才能顯示更詳細的資訊。

沒有縮放時顯示的內容：

放大一個級別之後顯示的內容：

放大到最大級別顯示的內容：

  接下來上程式碼

  伺服器地圖區域資料的模型

public class MapInfo implements Serializable {

	/**
	 * 地圖資料模型
	 */
	private static final long serialVersionUID = 4667341137172521648L;

	private String map_id;     //地圖ID
	private String map_WH;     //地圖的寬高
	private String map_route;  //定位線段
	private String map_img;    //地圖底圖的地址
	private String show_exit;  //出入口
	private ArrayList<MapDetail> map_details;   //地圖區域資料

	@Override
	public String toString() {
		return "MapInfo [map_id=" + map_id + ", map_WH=" + map_WH
				+ ", map_route=" + map_route + ", map_img=" + map_img
				+ ", map_details=" + map_details + "]";
	}

	
	public String getShow_exit() {
		return show_exit;
	}


	public void setShow_exit(String show_exit) {
		this.show_exit = show_exit;
	}


	public static long getSerialversionuid() {
		return serialVersionUID;
	}


	public String getMap_id() {
		return map_id;
	}

	public void setMap_id(String map_id) {
		this.map_id = map_id;
	}

	public String getMap_WH() {
		return map_WH;
	}

	public void setMap_WH(String map_WH) {
		this.map_WH = map_WH;
	}

	public String getMap_route() {
		return map_route;
	}

	public void setMap_route(String map_route) {
		this.map_route = map_route;
	}

	public String getMap_img() {
		return map_img;
	}

	public void setMap_img(String map_img) {
		this.map_img = map_img;
	}

	public ArrayList<MapDetail> getMap_details() {
		return map_details;
	}

	public void setMap_details(ArrayList<MapDetail> map_details) {
		this.map_details = map_details;
	}

	public class MapDetail implements Serializable {
		/**
		 * 
		 */
		private static final long serialVersionUID = -7211436420618576335L;
		private String D_id;             //區域ID
		private String D_location;       //區域座標
		private String D_status;         //區域的狀態
		private String map_id;           //地圖的ID
		private String point_type;       //座標的型別
		private String point_xy;         //定位的座標
 		private String show_id;          //展會的ID
		private String user_id;          //使用者ID
		private String user_nicename;    //使用者名稱
		private String gradeid;          //等級

		public String getGradeid() {
			return gradeid;
		}

		public void setGradeid(String gradeid) {
			this.gradeid = gradeid;
		}

		public String getD_id() {
			return D_id;
		}

		public void setD_id(String d_id) {
			D_id = d_id;
		}

		public String getD_location() {
			return D_location;
		}

		public void setD_location(String d_location) {
			D_location = d_location;
		}

		public String getD_status() {
			return D_status;
		}

		public void setD_status(String d_status) {
			D_status = d_status;
		}

		public String getMap_id() {
			return map_id;
		}

		public void setMap_id(String map_id) {
			this.map_id = map_id;
		}

		public String getPoint_type() {
			return point_type;
		}

		public void setPoint_type(String point_type) {
			this.point_type = point_type;
		}

		public String getPoint_xy() {
			return point_xy;
		}

		public void setPoint_xy(String point_xy) {
			this.point_xy = point_xy;
		}

		public String getShow_id() {
			return show_id;
		}

		public void setShow_id(String show_id) {
			this.show_id = show_id;
		}

		public String getUser_id() {
			return user_id;
		}

		public void setUser_id(String user_id) {
			this.user_id = user_id;
		}

		public String getUser_nicename() {
			return user_nicename;
		}

		public void setUser_nicename(String user_nicename) {
			this.user_nicename = user_nicename;
		}

		@Override
		public String toString() {
			return "MapDetail [D_id=" + D_id + ", D_location=" + D_location
					+ ", D_status=" + D_status + ", map_id=" + map_id
					+ ", point_type=" + point_type + ", point_xy=" + point_xy
					+ ", show_id=" + show_id + ", user_id=" + user_id
					+ ", user_nicename=" + user_nicename + ",gradeid="+gradeid+"]";
		}

	}
}
 

  地圖載入完成後開始畫區域名（我使用的是ImageLoader剛好有監聽方法）

//載入地圖
	private void loadMapImage() {
		ImageLoader.getInstance().displayImage(
				ApiClient.BASE_IMAGE + mapInfo.getMap_img(), mIndoorMapView,
				appContext.getOptions(), new ImageLoadingListener() {
					@Override
					public void onLoadingStarted(String arg0, View arg1) {

					}

					@Override
					public void onLoadingFailed(String arg0, View arg1,
							FailReason arg2) {

					}

					@Override
					public void onLoadingComplete(String arg0, View arg1,
							Bitmap arg2) {
						mIndoorMapView.setMapInfo(mapInfo);
						
						//System.out.println(mapInfo);
						int oriImageWidth = 0;
						int oriImageHeight = 0;
						try {
							oriImageWidth = Integer.parseInt(mapInfo
									.getMap_WH().split(",")[0]);
							oriImageHeight = Integer.parseInt(mapInfo
									.getMap_WH().split(",")[1]);
						} catch (NumberFormatException e) {
							e.printStackTrace();
						}
						int width = arg2.getWidth();
						int height = arg2.getHeight();
						Log.d(TAG, "" + width + "---" + height);
						Bitmap tempBitmap = arg2;
						if (width < (oriImageWidth / 2)) {
							tempBitmap = BitmapManager.zoomBitmap(arg2,
									oriImageWidth / 2, oriImageHeight / 2);
						}
						mIndoorMapView.setImageBitmap(tempBitmap);
						if(mIndoorMapView.getFirstbgbitmap()==null){
							mIndoorMapView.setFirstbgbitmap(((BitmapDrawable) mIndoorMapView.getDrawable()).getBitmap());
						}
						// The MAGIC happens here!
						mAttacher = new PhotoViewAttacher(mIndoorMapView);
						//儲存最開始的圖片比例
						if(firstZoom>=8){
							RectF rect=mAttacher.getDisplayRect();
							firstZoom=(float) Math.sqrt(((rect.height()*rect.height())+(rect.width()*rect.width())));
						}

					
						mIndoorMapView.drawMerchant();
						if(StringUtils.isEmpty(startPoint)){
							mIndoorMapView.setStartPointLoc(StringUtils.pointFromString(startPoint));
							startPoint=null;
						}
						mIndoorMapView.drawPointAndNavLine();
						//監聽地圖的點選 點選展位區域，跳轉到展會的詳情頁面
                                                //mAttacher.setOnPhotoTapListener(mapOnPhotoTapListener);			
						setZoomChang();
					 
					}

					@Override
					public void onLoadingCancelled(String arg0, View arg1) {

					}
				});
	}
 

  載入完成後畫出區域名字的方法

	public synchronized void drawMerchant() {
		/**
		 * 載入地圖後的初始化工作
		 */
		endBitmap = BitmapFactory.decodeResource(getResources(),
				R.drawable.indoormap_end);
		startBitmap = BitmapFactory.decodeResource(getResources(),
				R.drawable.indoormap_start);
		astar = new AStar();
		backBitmap = createMerchantInfoMapBitmap();
	}

	//畫展位名稱
	public Bitmap createMerchantInfoMapBitmap() {
		Bitmap myBitmap =firstbgbitmap;
		Bitmap bmpTemp = Bitmap.createBitmap(myBitmap.getWidth(),
				myBitmap.getHeight(), Bitmap.Config.RGB_565);
		Canvas canvas = new Canvas(bmpTemp);
		Paint p = new Paint();
		p.setColor(Color.rgb(105, 126, 151));
		p.setTextAlign(Paint.Align.CENTER);
		p.setAntiAlias(true);
		// 讓畫出的圖形是空心的
		p.setStyle(Paint.Style.FILL);
		// 設定畫出的線的 粗細程度
		p.setStrokeWidth(3);
		String familyName = "宋體";
		Typeface font = Typeface.create(familyName, Typeface.BOLD);
		p.setTypeface(font);
		canvas.drawBitmap(myBitmap, 0, 0, p);
		if (mapInfo != null && mapInfo.getMap_details() != null) {
		
			for (int i = 0; i < mapInfo.getMap_details().size(); i++) {
				MapInfo.MapDetail mapDetail = mapInfo.getMap_details().get(i);
				if (StringUtils.isEmpty(mapDetail.getPoint_xy())) {
					continue;
				}
				String[] xyArray = mapDetail.getPoint_xy().split(",");
				if (xyArray.length == 8) {
				// 設定字型大小
					if ((Integer.parseInt(xyArray[2]) / 2 - Integer
							.parseInt(xyArray[0]) / 2) > 40) {
						p.setTextSize(20);
					} else {
						p.setTextSize(14);
					}

					float x = Integer.parseInt(xyArray[0])
							/ 2
							+ (Integer.parseInt(xyArray[2]) / 2 - Integer
									.parseInt(xyArray[0]) / 2) / 2;
					float y = Integer.parseInt(xyArray[1])
							/ 2
							+ (Integer.parseInt(xyArray[5]) / 2 - Integer
									.parseInt(xyArray[1]) / 2) / 2;
					x += 6;
					y += 12;
					if (((Integer.parseInt(xyArray[2]) / 2 - Integer
							.parseInt(xyArray[0]) / 2)) < ((Integer
							.parseInt(xyArray[5]) / 2 - Integer
							.parseInt(xyArray[1]) / 2))
							&& !StringUtils.isEmpty(mapDetail
									.getUser_nicename())
							&& mapDetail.getUser_nicename().length() > 3) {
						//根據顯示等級顯示展位名稱
						//System.out.println("當前顯示等級"+AppConfig.getAppConfig(context).getShowName_Type());
						if(Integer.parseInt(mapDetail.getGradeid())>=AppConfig.getAppConfig(context).getShowName_Type()){
							canvas.rotate(-90, x, y);
							canvas.drawText(mapDetail.getUser_nicename(), x, y, p);
							canvas.rotate(90, x, y);
						}
							
						
					} else {
						//根據顯示等級顯示展位名稱
						if(Integer.parseInt(mapDetail.getGradeid())>=AppConfig.getAppConfig(context).getShowName_Type()){
							canvas.rotate(0, x, y);
							if (!StringUtils.isEmpty(mapDetail.getUser_nicename())) {
								canvas.drawText(mapDetail.getUser_nicename(), x, y,
										p);
							}
						}
						
						
					}
				}

			}
		}
		canvas.save(Canvas.ALL_SAVE_FLAG);
		canvas.restore();
		//如果有導航就重畫
		if(startPointLoc!=null&&endPoint!=null){
			backBitmap=bmpTemp;
			this.setImageDrawable(new BitmapDrawable(getResources(), bmpTemp));
			return drawPointAndNavLine();
		}else{
			this.setImageDrawable(new BitmapDrawable(getResources(), bmpTemp));
			return bmpTemp;
		}
		
	}

  原諒我無法提供原始碼下載，因為涉及的東西有點多，至於導航、定位功能我會在下篇部落格講。