[008] 百度地图API之ItemizedOverlay的使用(Android)

      本篇文章主要介绍如何在百度地图上添加Overlay（即图层或覆盖物）。

Overlay简介
      Overlay通常被译为“图层”或“覆盖物”。那么对于地图而言，什么称之为覆盖物？“所有叠加或覆盖到地图之上的内容，都被称之为地图覆盖物，如标注、矢量图形元素(包括：折线和多边形和圆)、定位图标等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。”
      为了让大家能够对Overlay有更进一步的认识，我们再通过下面的图形来直观的认识它。 图中标记的那些红色的图标A,B,...,J正是Overlay的其中一种形式。如果你了解PhotoShop中图层的概念，这里应该不难理解。我们可以这样来理解地图、图层与图层上标记物三者的关系： 下图中的那些红色标记并不属于地图的一部分，这些所有的标记是附着在图层上的，然后将图层蒙在地图之上。
     

百度地图API提供的几种Overlay
      百度地图API提供了以下几种Overlay(覆盖物)： 
      1）Overlay：它是所有覆盖物的抽象基类，所有的覆盖物均继承此类的方法，实现用户自定义图层显示；
      2）MyLocationOverlay：一个负责显示用户当前位置的Overlay； 
      3）ItemizedOverlay：它包含了一个OverlayItem列表，相当于一组分条的Overlay，通过继承此类，将一组兴趣点显示在地图上；
      4）PoiOverlay：本地搜索图层，提供某一特定地区的位置搜索服务，比如在北京市搜索“公园”，通过此图层将公园显示在地图上； 
      5）RouteOverlay：步行、驾车导航线路图层，将步行、驾车出行方案的路线及关键点显示在地图上；
      6）TransitOverlay：公交换乘线路图层，将某一特定地区的公交出行方案的路线及换乘位置显示在地图上。

ItemizedOverlay的使用示例
      ItemizedOverlay提供了一种快捷的方法，可以把标记图片和相关的文本分配给特定的地理位置。ItemizedOverlay实例可以处理每一个OverlayItem标记的绘制、放置、单击处理、焦点控制和布局优化。例如，上面的那个地图示例就是ItemizedOverlay。
      下面将通过一个示例来演示ItemizedOverlay的使用。我们先来看看最终做出的效果，如下图所示：
      
      我们的目标：“显示出百度地图，并且给地图添加一个图层(ItemizedOverlay)，该图层上有两个标记项(OverlayItem)，每个标记项上都标注有相应的图标、文本信息，并且能够响应点击事件(onTap)”。

1）布局文件res/layout/main.xml
     

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
	<com.baidu.mapapi.MapView android:id="@+id/map_View"
		android:layout_width="fill_parent"
    	android:layout_height="fill_parent"
    	android:clickable="true"
    />
</LinearLayout>

2）创建Activity继承com.baidu.mapapi.MapActivity
      

package com.liufeng.baidumap;

import java.util.List;

import android.graphics.drawable.Drawable;
import android.os.Bundle;

import com.baidu.mapapi.BMapManager;
import com.baidu.mapapi.GeoPoint;
import com.baidu.mapapi.MapActivity;
import com.baidu.mapapi.MapController;
import com.baidu.mapapi.MapView;
import com.baidu.mapapi.Overlay;
import com.baidu.mapapi.OverlayItem;

/**
 * 创建Activity（继承com.baidu.mapapi.MapActivity）
 * 
 * @author liufeng
 * @date 2011-05-02
 */
public class MainActivity extends MapActivity {
	private BMapManager mapManager;
	private MapView mapView;
	private MapController mapController;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		/**
		 * 初始化MapActivity
		 */
		mapManager = new BMapManager(getApplication());
		// init方法的第一个参数需填入申请的API Key
		mapManager.init("285B415EBAB2A92293E85502150ADA7F03C777C4", null);
		super.initMapActivity(mapManager);

		mapView = (MapView) findViewById(R.id.map_View);
		// 设置地图模式为交通地图
		mapView.setTraffic(true);
		// 设置启用内置的缩放控件
		mapView.setBuiltInZoomControls(true);

		/**
		 * 创建图标资源（用于显示在overlayItem所标记的位置）
		 */
		Drawable marker = this.getResources().getDrawable(R.drawable.ic_balloon);
		// 为maker定义位置和边界
		marker.setBounds(0, 0, marker.getIntrinsicWidth(), marker.getIntrinsicHeight());

		/**
		 * 创建自定义的ItemizedOverlay
		 */
		CustomItemizedOverlay overlay = new CustomItemizedOverlay(marker, this);

		/**
		 * 创建并添加第一个标记：柳峰的家乡（经度：87.493147 纬度：47.118440）
		 */
		// 构造一个经纬度点
		GeoPoint point = new GeoPoint((int) (47.118440 * 1E6), (int) (87.493147 * 1E6));
		// 创建标记（新疆福海县）
		OverlayItem overlayItem = new OverlayItem(point, "柳峰的家乡", "新疆福海县");
		// 将标记添加到图层中（可添加多个OverlayItem）
		overlay.addOverlay(overlayItem);

		/**
		 * 创建并添加第二个标记：美丽的乌伦古湖（经度：87.249693 纬度：47.276757）
		 */
		point = new GeoPoint((int) (47.276757 * 1E6), (int) (87.249693 * 1E6));
		// 创建标记（乌伦古湖）
		overlayItem = new OverlayItem(point, "美丽的乌伦古湖", "乌伦古湖是中国十大淡水湖之一");
		// 将标记添加到图层中（可添加多个OverlayItem）
		overlay.addOverlay(overlayItem);

		/**
		 * 往地图上添加自定义的ItemizedOverlay
		 */
		List<Overlay> mapOverlays = mapView.getOverlays();
		mapOverlays.add(overlay);

		/**
		 * 取得地图控制器对象，用于控制MapView
		 */
		mapController = mapView.getController();
		// 设置地图的中心
		mapController.setCenter(point);
		// 设置地图默认的缩放级别
		mapController.setZoom(9);
	}

	@Override
	protected boolean isRouteDisplayed() {
		return false;
	}

	@Override
	protected void onDestroy() {
		if (mapManager != null) {
			mapManager.destroy();
			mapManager = null;
		}
		super.onDestroy();
	}

	@Override
	protected void onPause() {
		if (mapManager != null) {
			mapManager.stop();
		}
		super.onPause();
	}

	@Override
	protected void onResume() {
		if (mapManager != null) {
			mapManager.start();
		}
		super.onResume();
	}
}

 

3）创建自定义的Overlay继承ItemizedOverlay
      

package com.liufeng.baidumap;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.widget.Toast;

import com.baidu.mapapi.ItemizedOverlay;
import com.baidu.mapapi.MapView;
import com.baidu.mapapi.OverlayItem;
import com.baidu.mapapi.Projection;

/**
 * 自定义ItemizedOverlay
 * 
 * @author liufeng
 * @date 2011-05-02
 */
public class CustomItemizedOverlay extends ItemizedOverlay<OverlayItem> {

	private ArrayList<OverlayItem> overlayItemList = new ArrayList<OverlayItem>();
	private Context context;

	public CustomItemizedOverlay(Drawable defaultMarker) {
		super(boundCenterBottom(defaultMarker));
	}

	public CustomItemizedOverlay(Drawable marker, Context context) {
		super(boundCenterBottom(marker));
		this.context = context;
	}

	@Override
	protected OverlayItem createItem(int i) {
		return overlayItemList.get(i);
	}

	@Override
	public int size() {
		return overlayItemList.size();
	}

	public void addOverlay(OverlayItem overlayItem) {
		overlayItemList.add(overlayItem);
		this.populate();
	}

	@Override
	public void draw(Canvas canvas, MapView mapView, boolean shadow) {
		super.draw(canvas, mapView, shadow);
		// Projection接口用于屏幕像素点坐标系统和地球表面经纬度点坐标系统之间的变换
		Projection projection = mapView.getProjection();
		// 遍历所有的OverlayItem
		for (int index = this.size() - 1; index >= 0; index--) {
			// 得到给定索引的item
			OverlayItem overLayItem = getItem(index);

			// 把经纬度变换到相对于MapView左上角的屏幕像素坐标
			Point point = projection.toPixels(overLayItem.getPoint(), null);

			Paint paintText = new Paint();
			paintText.setColor(Color.RED);
			paintText.setTextSize(13);
			// 绘制文本
			canvas.drawText(overLayItem.getTitle(), point.x + 10, point.y - 15, paintText);
		}
	}

	@Override
	// 处理点击事件
	protected boolean onTap(int i) {
		setFocus(overlayItemList.get(i));
		Toast.makeText(this.context, overlayItemList.get(i).getSnippet(), Toast.LENGTH_SHORT).show();
		return true;
	}
}

  

4）配置AndroidManifest.xml
     

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.liufeng.baidumap"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MainActivity" android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

    <uses-sdk android:minSdkVersion="4" />
	<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" />
</manifest>