Android进阶：在地图MapView中 点击Overlay弹出带带尾巴的浮动气泡 提示信息并关闭

用户查询POI点后会在MapView中以Overlay的方式显示POI点信息 用户点击Overlay后可以显示详细信息

 

先看效果如图

 

 

在相应的Overlay所在的GeoPoint显示该提示

 

下面看实现：

 

首先背景为9patch图片

 

 

这样就可以随意在里面加内容了 我这里通过一个布局文件来进行控制

 

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

 

用了RelativeLayout的布局 对文字的宽度进行了设置，防止文字过多导致超出屏幕范围

那这里也可以根据手机屏幕宽度进行动态设置

 

然后再oncreate中初始化这个View

 

popView = super.getLayoutInflater().inflate(R.layout.overlay_pop, null); mapView.addView( popView, new MapView.LayoutParams(MapView.LayoutParams.WRAP_CONTENT, MapView.LayoutParams.WRAP_CONTENT, null, MapView.LayoutParams.BOTTOM_CENTER)); 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(); geoLP.point = GeoList.get(i).getPoint(); mContext.mapView.updateViewLayout(mContext.popView, geoLP); mContext.popView.setVisibility(View.VISIBLE); textView1 = (TextView) mContext.findViewById(R.id.map_bubbleTitle); textView2 = (TextView) mContext.findViewById(R.id.map_bubbleText); textView1.setText("提示信息"); textView2.setText("aaaaaaaaaaaaaaaaaaaaaaaaa===="+GeoList.get(i).getSnippet()); ImageView imageView = (ImageView) mContext.findViewById(R.id.map_bubbleImage); imageView.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { mContext.popView.setVisibility(View.GONE); } });

其中mContext就是自己实现的MapActivity

 

这里根据当前点击的Overlay拿到该GeoPoint 然后设置到MapView.LayoutParams中

 

然后设置为可见 就会显示说明信息了。。同样点击关闭按钮就会设置为View.GONE

 

 

代码下载地址：   googlemaptest.rar