Android地图开发有个很常见的需求,比如地图上绘制一系列图标,点击每个图标,弹出一个气泡,里面是详细内容,有图片、文字等等。
这篇文章讲的是如何自定义一个弹出框,里面包含图片、文字等等,思路是这样的:
我们写一个弹出框的xml布局文件,需要弹出的时候,将这个view转换成bitmap,然后转换成drawable,然后就可以控制这个drawable的位置,比如让它显示在图标的上方,当然可以随意设定弹出的位置。
我们先看看效果图:
地图使用的是图吧的地图,实际上Google Maps也是一样的,API调用方法都一样的,只是图吧地图xml布局里面不需要key。
上图中弹出的气泡时间上是一个LinearLayout,只是将其转换成了drawable,以便使用canvas绘制。
这里我们分成两个部分讲,分成两个类,MapPopupActivity(地图页面)和MapPopupView(弹出框)。
1.首先,我们准备好地图,在此地图上我们将绘制一系列图标,点击图标时弹出气泡。内容有点多,我会进行注释。
MapPopupActivity.java
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import com.mapbar.android.maps.*;
import com.tuan800.credit.R;
import com.tuan800.credit.views.MapPopupView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by IntelliJ IDEA.
* User: chenjishi
* Date: 12-4-10
* Time: 下午4:29
* To change this template use File | Settings | File Templates.
*/
public class MapPopupActivity extends MapActivity implements MapPopupView.PopupViewTapListener {
private List<Spot> mSpotList;
private MapView mMapView;
private MapController mMapController;
private List<Overlay> mOverlayList;
private OverItemT mOverItemT;
//弹出窗口类
private MapPopupView mMapPopupView;
//设定一个地图中心位置
private double mLat = 39.973860D;
private double mLng = 116.382240D;
private Resources mRes;
@Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
setContentView(R.layout.map_view);
mMapView = (MapView) this.findViewById(R.id.map_view);
mMapView.setBuiltInZoomControls(true);
mMapController = mMapView.getController();
mMapController.setZoom(12);
mRes = getResources();
//默认图标
Drawable defaultIcon = mRes.getDrawable(R.drawable.my_location);
defaultIcon.setBounds(0, 0, defaultIcon.getIntrinsicWidth(), defaultIcon.getIntrinsicHeight());
//绘制图标的内部类
mOverItemT = new OverItemT(defaultIcon);
//初始化弹出窗
mMapPopupView = new MapPopupView(this, mRes.getDrawable(R.drawable.category_1));
//处理弹出窗的点击事件
mMapPopupView.setPopupViewListener(this);
mOverlayList = mMapView.getOverlays();
//下面这两句很重要,不然图标无法显示
mOverlayList.add(mOverItemT);
mOverlayList.add(mMapPopupView);
//设置地图中心点
setMyLocation();
//初始化一系列图标
setData();
//往地图上绘制图标
setMarkers();
}
private void setMyLocation() {
GeoPoint p = new GeoPoint((int) (mLat * 1E6), (int) (mLng * 1E6));
mOverItemT.addOverlay(new OverlayItem(p, "我的位置", ""), 0);
mMapController.setCenter(p);
}
private void setMarkers() {
if (mSpotList.size() == 0) {