Android進階：在地圖MapView中 點擊Overlay彈出帶帶尾巴的浮動氣泡 提示資訊並關閉

使用者查詢POI點後會在MapView中以Overlay的方式顯示POI點資訊 使用者點擊Overlay後可以顯示詳細資料

 

先看效果

 

 

在相應的Overlay所在的GeoPoint顯示該提示

 

下面看實現：

 

首先背景為9patch圖片

 

 

這樣就可以隨意在裡面加內容了 我這裡通過一個布局檔案來進行控制

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:background="@drawable/info_bubble"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:paddingLeft="5px"<br /> android:paddingTop="5px"<br /> android:paddingRight="5px"<br /> android:paddingBottom="20px"<br /> ></p><p> <TextView android:id="@+id/map_bubbleTitle"<br /> android:ellipsize="marquee"<br /> android:layout_width="120px"<br /> android:layout_height="wrap_content"<br /> android:gravity="center_horizontal"<br /> android:singleLine="true" /><br /> <ImageView android:id="@+id/map_bubbleImage"<br /> android:background="@drawable/close"<br /> android:layout_width="30px"<br /> android:layout_toRightOf="@id/map_bubbleTitle"<br /> android:layout_height="wrap_content" /></p><p> <TextView android:id="@+id/map_bubbleText"<br /> android:layout_width="150px"<br /> android:layout_below="@id/map_bubbleTitle"<br /> android:layout_height="wrap_content"<br /> android:singleLine="false" /></p><p></RelativeLayout>

 

用了RelativeLayout的布局 對文字的寬度進行了設定，防止文字過多導致超出螢幕範圍

那這裡也可以根據手機螢幕寬度進行動態設定

 

然後再oncreate中初始化這個View

 

popView = super.getLayoutInflater().inflate(R.layout.overlay_pop, null);<br /> mapView.addView( popView,<br /> new MapView.LayoutParams(MapView.LayoutParams.WRAP_CONTENT, MapView.LayoutParams.WRAP_CONTENT,<br /> null, MapView.LayoutParams.BOTTOM_CENTER));<br />popView.setVisibility(View.GONE);

 

這裡沒有設定GeoPoint  由於氣泡的尾巴是在下邊置中的,因此要設定成MapView.LayoutParams.BOTTOM_CENTER.

 

預設是不可見的。。這裡必須要設定為View.GONE 因為  View.INVISIBLE還是會在onlayout中給View定位的 這裡沒有設定GeoPoint就會報錯

 

然後就可以在自己實現的ItemizedOverlay<OverlayItem> 類中的方法onTap中顯示該ViewMapView.LayoutParams geoLP = (MapView.LayoutParams) mContext.popView.getLayoutParams();<br />geoLP.point = GeoList.get(i).getPoint();<br />mContext.mapView.updateViewLayout(mContext.popView, geoLP);<br />mContext.popView.setVisibility(View.VISIBLE);<br />textView1 = (TextView) mContext.findViewById(R.id.map_bubbleTitle);<br />textView2 = (TextView) mContext.findViewById(R.id.map_bubbleText);<br />textView1.setText("提示資訊");<br />textView2.setText("aaaaaaaaaaaaaaaaaaaaaaaaa===="+GeoList.get(i).getSnippet());<br />ImageView imageView = (ImageView) mContext.findViewById(R.id.map_bubbleImage);<br />imageView.setOnClickListener(new View.OnClickListener(){<br />@Override<br />public void onClick(View v) {</p><p>mContext.popView.setVisibility(View.GONE);<br />}</p><p>});

其中mContext就是自己實現的MapActivity

 

這雷根據當前點擊的Overlay拿到該GeoPoint 然後設定到MapView.LayoutParams中

 

然後設定為可見 就會顯示說明資訊了。。同樣點擊關閉按鈕就會設定為View.GONE

 

 

代碼：
  googlemaptest.rar