2011年7月27日 星期三

Google Map ItemizedOverlay 使用

這個部分會來簡介一下如何使用 ItemizedOverlay 來達到放至地標在地圖上,並且點選地標可以顯示相關訊息的功能。

ItemizedOverlay

ItemizedOverlay 是繼承自 Overlay 的抽象物件,所以也必須要先實做,當實做 ItemizedOverlay 時,除了建構子外有兩個必須要覆寫的方法,一個是 creamItem() 另一個是 size() ,如果需要對地標做點擊的動作,那就需要再覆寫 onTap() 這個方法,首先來看一下完整的原始碼 (此處把 import 的部分刪除) :

public class exMap extends MapActivity {
/** Called when the activity is first created. */
GeoPoint mGeoPoint01,mGeoPoint02;
ArrayList<OverlayItem> items = new ArrayList<OverlayItem>();
Context mContext;

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

MapView mMapView = (MapView)findViewById(R.id.mapview);
mMapView.setBuiltInZoomControls(true);
mMapView.setTraffic(false);
MapController mMapController = mMapView.getController();
mMapController.setZoom(17);
mGeoPoint01 = new GeoPoint(24121194,120675526);
mGeoPoint02 = new GeoPoint(24121190,120675520);
mMapController.animateTo(mGeoPoint01);


List<Overlay> list = mMapView.getOverlays();
MyOverlay mOverlay = new MyOverlay(getResources().getDrawable(R.drawable.icon),this);

OverlayItem mOverlayItem01 = new OverlayItem(mGeoPoint01,"這裡是地標01","點擊地標");
OverlayItem mOverlayItem02 = new OverlayItem(mGeoPoint02,"這裡是地標02","點擊地標");
mOverlay.addItem(mOverlayItem01);
mOverlay.addItem(mOverlayItem02);
list.add(mOverlay);
}

@Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}

class MyOverlay extends ItemizedOverlay<OverlayItem>{
public MyOverlay(Drawable defaultMarker,Context context) {
super(boundCenterBottom(defaultMarker));
mContext = context;
}

@Override
protected OverlayItem createItem(int i) {
// TODO Auto-generated method stub
return items.get(i);
}

@Override
public int size() {
// TODO Auto-generated method stub
return items.size();
}

@Override
protected boolean onTap(int index) {
OverlayItem item = items.get(index);
AlertDialog.Builder dialog = new AlertDialog.Builder(mContext);
dialog.setTitle(item.getTitle());
dialog.setMessage(item.getSnippet());
dialog.show();
return true;
}

public void addItem(OverlayItem item){
items.add(item);
populate();
}
}
}
先來看一下 ItemizedOverlay 在此處的執行流程 :
  1. 實做 ItemizedOverlay 類別,覆寫 createItem() 與 size() 兩個方法。
  2. 新增 addItem() 用來將地標加入
  3. 覆寫 onTap() 方法,可執行暗地標所需動作
  4. 在 MapActivity 中新增地圖
  5. 接著取得 MapView 中存放圖層的 List
  6. 建立 ItemizedOverlay 物件,並傳入地標圖示
  7. 建立地標點
  8. 將地標點加入至 ItemizedOverlay 物件中
  9. 將 ItemizedOverlay 物件加入至存放圖層的 List

建立 ItemizedOverlay 類別

這裡實做 ItemizedOverlay 需要傳入兩個參數,一個是地標的圖示另一個是要使用的 Context,這個 Context 是之後要用來顯示點選地標時所顯示的對話框,createItem() 在這裡雖然沒有直接被呼叫,但是在 addItem 中的 populate() 會去呼叫 createItem() ,所以當我們使用 addItem() 將地標加入圖層時,也同時可以利用 createItem() 做初始化的動作。當必須要使用到點選地標的功能時,則需要覆寫 onTap() 方法,這個方法可以讀入點選的地標號碼並取得 OverlayItem 物件,取得後即可作物件的相關操作。


建立與使用 ItemizedOverlay 物件
除了要建立 ItemizedOverlay 物件外,對於地標物件的建立也是必須的,基本的地標物件包含了 GeoPoint 物件、標題以及簡短內文;地標必須加入至圖層,圖層在繪製的時候才會有此地標,並且這個圖層也必須加入至 MapView 中存放圖層的 List 中,才會真正的被繪出。



實際執行畫面


兩個地標




點選中間第一個座標




點選左上角第二個座標

0 意見:

張貼留言

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger