android google map 气泡

转载 2011年01月12日 16:42:00
文章分类:移动开发

就是上面的样子

做这个过程中我碰到两个问题:
1:如何做带尾巴的气泡View
2:如何把这个View添加到MapView中.


1:如何做带尾巴的气泡View
我是采用背景图的方式来实现的.当然,普通的PNG在View 缩放的时候会失真,尤其是那个尖尖的尾巴.
后来采用9.png的格式,才完成了不变形的效果.9.png格式的Png可以用SDK/Tools/draw9patch.bat来处理,只要把普通的 png的边上标志一下就可以了,具体draw9patch.bat如何使用这里就不说了,网上有很多文档,自己查查就知道了.
我生成的9.png就是下面这个样子,注意四周的黑线.就是9png拉伸时的标识


有了这个png,直接放到你的工程下的res/drawable目录就可以了,
然后在res/layout目录下建立你的view的xml文件,比如叫overlay_pop.xml,我的是这样的:

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:background="@drawable/bubble_background" <!--这就是那个9.png-->
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingLeft="5px"
 android:paddingTop="5px"
 android:paddingRight="5px"
 android:paddingBottom="20px"    <!--注意加上padding,否则view里面的东西就画到边框上了-->
   >
    <TextView android:id="@+id/map_bubbleTitle"
       android:ellipsize="marquee"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:gravity="center_horizontal"
       android:singleLine="true"
       style="@style/map_BubblePrimary" /> <!--style可以没有,我这里第一个TextView表示标题,用的是大字体-->
    <TextView  android:id="@+id/map_bubbleText"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:singleLine="false"
       style="@style/map_BubbleSecondary" /><!--style可以没有,我这里第二个TextView表示描述信息,用的是大字体-->
</LinearLayout>


这样popView就建立好了


2:如何把这个View添加到MapView中.
通常是在mapView中点击某个位置,弹出popView
或者点击某个Overlay弹出popView,这里用点击Overlay来说明,

overlay有onTap()方法,你可以实现自己的overlay,overideonTap()方法,弹出popView,
也可以使用setOnFocusChangeListener(),在listener中实现弹出popView,.
我是用的listener,因为setOnFocusChangeListener在失去焦点也会触发,我可以再失去焦点的时候隐藏popView.

MapView是继承自ViewGroup 的,因此,MapView有addView()方法,同时还有MapView.LayoutParams
MapView.LayoutParams 可以根据GeoPoint来定位,我就是利用这个特性来定位弹出的popView的.

PointItemizedOverlay overlay = new PointItemizedOverlay(drawable); <!--这是我继承自ItemizedOverlay的overlay,主要就是画一个图片,写一个名称,很简单,这里不贴具体代码了-->

public class BaseMapActivity extends MapActivity {

 /**
  * 地图View
  */
 protected MapView mapView;

 /**
  * 弹出的气泡View
  */
 private View popView;
/**
    监听器
*/
 private final ItemizedOverlay.OnFocusChangeListener onFocusChangeListener = new ItemizedOverlay.OnFocusChangeListener() {

  @Override
  public void onFocusChanged(ItemizedOverlay overlay, OverlayItem newFocus) {
      //创建气泡窗口

   if (popView != null) {
      popView.setVisibility(View.GONE);
   }

   if (newFocus != null) {

    MapView.LayoutParams geoLP = (MapView.LayoutParams) popView.getLayoutParams();
    geoLP.point = newFocus.getPoint();//这行用于popView的定位
    TextView title = (TextView) popView.findViewById(R.id.map_bubbleTitle);
    title.setText(newFocus.getTitle());

    TextView desc = (TextView) popView.findViewById(R.id.map_bubbleText);
    if (newFocus.getSnippet() == null || newFocus.getSnippet().length() == 0) {
     desc.setVisibility(View.GONE);
    } else {
     desc.setVisibility(View.VISIBLE);
     desc.setText(newFocus.getSnippet());
    }
    mapView.updateViewLayout(popView, geoLP);
    popView.setVisibility(View.VISIBLE);
   }
  }
 };




     public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
            /**
            省略其他代码
           **/

          //初始化气泡,并设置为不可见

       popView = inflater.inflate(R.layout.overlay_popup, null);
       mapView.addView( popView,
             new MapView.LayoutParams(MapView.LayoutParams.WRAP_CONTENT, MapView.LayoutParams.WRAP_CONTENT,
           null, MapView.LayoutParams.BOTTOM_CENTER));
          //由于我的气泡的尾巴是在下边居中的,因此要设置成MapView.LayoutParams.BOTTOM_CENTER.
          //这里没有给GeoPoint,在onFocusChangeListener中设置
       views.add(popView);
      popView.setVisibility(View.GONE);

    添加overlay
    PointItemizedOverlay overlay = new PointItemizedOverlay(drawable);
    //设置显示/隐藏泡泡的监听器
    overlay.setOnFocusChangeListener(onFocusChangeListener);
    overlay.addOverlay(/*你自己的overlayItem*/);
    overlay.addOverlay(/*你自己的overlayItem*/);
    overlay.addOverlay(/*你自己的overlayItem*/);

    }
}

android版百度地图 自定义 点击当前位置弹出气泡

//继承MyLocationOverlay重写dispatchTap实现点击处理 public class locationOverlay extends MyLocationOverlay{ ...
  • a57565587
  • a57565587
  • 2013年07月31日 13:59
  • 8510

Android自定义view案例一气泡框

通过之前的两个基础文章的学习,我们基本知道自定义view的基本流程和各方法的作用了。那么接下来我们就要拿起画笔去绘制我们的view了。首先老规矩把我们的学习大纲拿出来,时刻不能忘,,哈哈、 1.自定...
  • WangRain1
  • WangRain1
  • 2017年05月26日 14:53
  • 1484

ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图,高德地图,google地图)

前言 在ios上边使用地图库的同学肯定遇到过这样的问题:吹出框只能设置title和subtitle和左右的view,不管是百度地图还是高德地图还是自带的google地图,只提供了这四个属性,如果想...
  • mad1989
  • mad1989
  • 2013年04月12日 21:21
  • 34476

android应用开发全程实录-关于google map的部分章节-漂亮的气泡地图

12.1.2 Geopoint与MapView 在开始Google Map之前,先来认识下maps包下两个重要的类Geopoint 和MapView 。 Geopoint类是一个不可变类,...
  • notice520
  • notice520
  • 2011年11月23日 09:11
  • 5736

关于google map的--气泡地图

在开始Google Map之前,先来认识下maps包下两个重要的类Geopoint 和MapView 。 Geopoint类是一个不可变类,表示一组经度和纬度值,以微度的整数形式存储。 p...
  • cai75951577
  • cai75951577
  • 2012年03月14日 09:40
  • 1003

Android Google Map API 开发基础知识

  • 2013年01月16日 19:16
  • 25KB
  • 下载

android google map 本地服务 locationservice

  • 2013年05月08日 15:40
  • 752KB
  • 下载

google map for android

  • 2011年08月21日 09:34
  • 37KB
  • 下载

google Map for Android总结

  • 2011年08月20日 23:40
  • 35KB
  • 下载

android写的google map api 应用

  • 2013年11月17日 20:30
  • 94KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android google map 气泡
举报原因:
原因补充:

(最多只允许输入30个字)