还是觉得每章单独建立目录方便,从这章开始吧。
1 覆盖物
覆盖物是指叠加或覆盖到地图上的内容,覆盖物有自己的地理坐标,将根据地图的移动而移动。
百度地图支持多种类型的覆盖物:
- 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标);
- Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层;
- 路线图层(RouteOverlay):公交、步行和驾车线路图层,将公交、步行和驾车出行方案的路线及关键点显示在地图上(起、终点图标用户可自定义);
- 公交换乘图层(TransitOverlay):公交换乘线路图层,将某一特定地区的公交出行方案的路线及换乘位置显示在地图上(起、终点图标用户可自定义);
- 自定义图层(ItemizedOverlay):可将一个或多个兴趣点绘制到地图上,且支持自定义图标(支持动态更新Item位置、图标);
- 弹出窗图层(PopupOverlay):在地图上显示一个弹出窗口;
- 几何图形绘制图层(GraphicsOverlay):用于绘制点、线、圆、矩形、多边形等几何图形的图层;
- 文字绘制图层(TextOverlay):用于绘制文字的图层。
- 图片图层(GroundOverlay):用于展示用户传入图片的图层。
其中PoiOverlay、RouteOverlay等我们在之前已经接触过,下面详细描述。
MapView使用一个List管理覆盖物,通过向MapView.getOverlays() add或remove上述类或其基类的实例即可向地图添加或删除覆盖物。在更新地图覆盖物后,需调用MapView.refresh() 使更新生效。
1.1 我的位置图层
将MyLocationOverlay添加到覆盖物中,能够实现在地图上显示当前位置的图标以及指南针。具体代码如下:
MyLocationOverlay myLocationOverlay = new MyLocationOverlay(
mMapView);
LocationData locData = new LocationData();
// 此处模拟位置,可用实际位置替代
locData.latitude = 31.209294;
locData.longitude = 121.472471;
locData.direction = 300.0f;
myLocationOverlay.setData(locData);
mMapView.getOverlays().add(myLocationOverlay);
mMapView.refresh();
mMapView.getController().animateTo(
new GeoPoint((int) (locData.latitude * 1e6),
(int) (locData.longitude * 1e6)));
1.2 Poi搜索图层(PoiOverlay)
Poi搜索图层的使用可以参照之前的文章:地图检索。
1.3 路线图层(RouteOverlay)
路线图层的使用可以参照之前的文章:路线规划。
1.4 公交换乘图层(TransitOverlay)
请参照路线规划中的公交搜索部分。
1.5 自定义图层(ItemizedOverlay)
2.0.0以前的SDK中是可以直接继承Overlay来实现自定义图层的,但新版的SDK中我们只能通过集成ItemizedOverlay来实现自定义图层功能了。
下面的代码演示了添加自定义图层的功能,百度的这个例子非常好。不过在我的测试手机上很奇怪没能显示title和snippet。
// 准备要添加的Overlay
double mLat1 = 39.90923;
double mLon1 = 116.397428;
double mLat2 = 39.9022;
double mLon2 = 116.3922;
double mLat3 = 39.917723;
double mLon3 = 116.3722;
// 用给定的经纬度构造GeoPoint,单位是微度 (度 * 1E6)
GeoPoint p1 = new GeoPoint((int) (mLat1 * 1E6), (int) (mLon1 * 1E6));
GeoPoint p2 = new GeoPoint((int) (mLat2 * 1E6), (int) (mLon2 * 1E6));
GeoPoint p3 = new GeoPoint((int) (mLat3 * 1E6), (int) (mLon3 * 1E6));
// 准备overlay图像数据,根据实情情况修复
Drawable mark= getResources().getDrawable(R.drawable.loc);
mark.setBounds(0, 0, mark.getIntrinsicWidth(), mark.getIntrinsicHeight());
// OverlayItem(GeoPoint point, java.lang.String title, java.lang.String snippet)
OverlayItem item1 = new OverlayItem(p1,"title1","snippet1");
//使用setMarker()方法设置overlay图片,如果不设置则使用构建ItemizedOverlay时的默认设置
OverlayItem item2 = new OverlayItem(p2,"item2","item2");
item2.setMarker(mark);
OverlayItem item3 = new OverlayItem(p3,"item3","item3");
//创建ItemizedOverlay
CustomOverlay itemOverlay = new CustomOverlay(mark, mMapView);
//将IteminizedOverlay添加到MapView中
mMapView.getOverlays().clear();
mMapView.getOverlays().add(itemOverlay);
//现在所有准备工作已准备好,使用以下方法管理overlay.
//添加overlay, 当批量添加Overlay时使用addItem(List<OverlayItem>)效率更高
itemOverlay.addItem(item1);
itemOverlay.addItem(item2);
itemOverlay.addItem(item3);
mMapView.refresh();
CustomOverlay.java代码:
public class CustomOverlay extends ItemizedOverlay<OverlayItem> {
public CustomOverlay(Drawable mark,MapView mapView) {
super(mark, mapView);
}
@Override
public boolean onTap(GeoPoint p, MapView mapView) {
return super.onTap(p, mapView);
}
/**
* 覆盖这个方法去处理一个item上的点击事件。 这可能是对屏幕上item的触摸点击,或者对位于中心且已选定的item的跟踪球点击。默认情况下,什么都不做,返回false
* 如果点击事件被处理,返回true;如果想要把这个事件传递给其它overlay,返回false
*/
@Override
protected boolean onTap(int index) {
System.out.println("第" + index + "个点被点击");
return super.onTap(index);
}
}
1.6 弹出窗口图层(PopupOverlay)
弹出窗口图层将在地图上显示一个三张图片组成的弹窗,点击三张图片将调用不同的事件处理方法。这里的例子比较简单,准备好图片资源和地理位置后,直接创建一个PopupOverlay对象后调用其showPopup方法即可。
// 创建pop对象,注册点击事件监听接口
PopupOverlay pop = new PopupOverlay(mMapView,
new PopupClickListener() {
@Override
public void onClickedPopup(int index) {
// 在此处理pop点击事件,index为点击区域索引,点击区域最多可有三个
Toast.makeText(getApplicationContext(), "这是第" + (index + 1) + "个区域", Toast.LENGTH_SHORT).show();
}
});
/**
* 准备pop弹窗资源,根据实际情况更改 弹出包含三张图片的窗口,可以传入三张图片、两张图片、一张图片。
* 弹出的窗口,会根据图片的传入顺序,组合成一张图片显示. 点击到不同的图片上时,回调函数会返回当前点击到的图片索引index
*/
Bitmap[] bmps = new Bitmap[3];
try {
bmps[0] = BitmapFactory.decodeStream(getAssets().open(
"01.png"));
bmps[1] = BitmapFactory.decodeStream(getAssets().open(
"02.png"));
bmps[2] = BitmapFactory.decodeStream(getAssets().open(
"03.jpg"));
} catch (IOException e) {
e.printStackTrace();
}
// 弹窗弹出位置
GeoPoint ptTAM = new GeoPoint((int) (39.915 * 1E6),
(int) (116.404 * 1E6));
// 弹出pop,隐藏pop
pop.showPopup(bmps, ptTAM, 32);
// 隐藏弹窗
// pop.hidePop();
而SDK的2.3.0版本之后新增了一个直接popup一个view的方法,我们看看这个例子:
// 创建pop对象,注册点击事件监听接口
PopupOverlay pop = new PopupOverlay(mMapView,
new PopupClickListener() {
@Override
public void onClickedPopup(int index) {
Toast.makeText(getApplicationContext(), index, Toast.LENGTH_SHORT).show();
}
});
// 弹窗弹出位置
GeoPoint ptTAM = new GeoPoint((int) (39.915 * 1E6),
(int) (116.404 * 1E6));
LayoutInflater inflater = LayoutInflater.from(BaiduMapActivity.this);
View view = inflater.inflate(R.layout.activity_ui, null);
// 弹出pop,隐藏pop
pop.showPopup(view, ptTAM, 32);
// 隐藏弹窗
// pop.hidePop();
这里能够明显看到,PopupClickListener已经完全没有作用,所以在PopupOverlay的构造函数中,PopupClickListener参数可以填null。
1.7 几何图形图层(GraphicsOverlay)
绘制几何图形图层的时候需要使用到下面的几个类:
- Geometry:这是一个几何图形类,利用此类,可以构建待绘制的各种基本几何元素;简单的说,Geometry定义形状轮廓。
- Symbol:样式类,如果只构建几何图形类而没有样式的话,该几何图形是无意义的;简单的说,Symbol用于定义画笔、画刷等元素;
- Graphic:图形类,利用几何图形加上样式,这样就可以构建一个图形类,Graphic就是这样一个类,用于管理所添加的图形;简单的说,这是一个用来绘图的对象。
- GraphicsOverlay:这是一个用于绘制图形的overlay,和其他的各种overlay用法相同。
例子仍然使用SDK自带的例子,我在这里重新梳理了注释,标识了逻辑顺序。
// 移动,缩放地图中心点
mMapView.getController().setZoom(16);
// 中心点坐标
GeoPoint palaceCenter = new GeoPoint((int)(39.924 * 1E6),(int)(116.403 * 1E6));
mMapView.getController().setCenter(palaceCenter);
/** 第一步,创建轮廓对象Geometry */
//故宫左上角
GeoPoint geoPoint1 = new GeoPoint((int)(39.929 * 1E6),(int)(116.397 * 1E6));
//故宫右下角
GeoPoint geoPoint2 = new GeoPoint((int)(39.920 * 1E6),(int)(116.408 * 1E6));
//创建一个轮廓对象
Geometry palaceGeometry = new Geometry();
// 设置轮廓参数是矩形,还有setCircle/setPoint/setPolygon/setPolyline等方法设置轮廓
palaceGeometry.setEnvelope(geoPoint1, geoPoint2);
/** 第二步,创建用于外框及填充的Symbol对象 */
Symbol palaceSymbol = new Symbol();//创建样式
Symbol.Color palaceColor = palaceSymbol.new Color();//创建颜色
palaceColor.red = 0;//设置颜色的红色分量
palaceColor.green = 0;//设置颜色的绿色分量
palaceColor.blue = 255;//设置颜色的蓝色分量
palaceColor.alpha = 126;//设置颜色的alpha值
// 创建一个边框对象
// 参数 - 5: 边框的线宽
// 参数 - polygonSymbol.new Color(0xffff0000):边框的颜色
Stroke stroke = new Stroke(5, palaceSymbol.new Color(0xffff0000));
// public void setSurface(Symbol.Color color, int status, int linewidth, Symbol.Stroke stroke)
// 设置面样式
// color - 颜色
// status - 填充状态,0表示不填充,1表示填充
// linewidth - 线宽,当填充状态为填充时线宽无意义
// stroke - 边框
palaceSymbol.setSurface(palaceColor, 1, 3, stroke);
/** 第三步,创建Graphic对象 */
Graphic palaceGraphic = new Graphic(palaceGeometry, palaceSymbol);
/** 第四步,创建一个GraphicsOverlay来装载故宫的Graphic */
GraphicsOverlay palaceOverlay = new GraphicsOverlay(mMapView);
// palaceId可以在后面用来移除该对象。 palaceOverlay.removeGraphic(long graphicID)
long palaceId = palaceOverlay.setData(palaceGraphic);
// 将overlay添加到mapview中
mMapView.getOverlays().add(palaceOverlay);
// 刷新地图使新添加的overlay生效
mMapView.refresh();
1.8 文字绘制图层(TextOverlay)
文字图层基本上和图形差不多,注意文本对象(TextItem)创建时指定了文字大小,所以不会随地图缩放:
// 注意Symbol是不可重用的,所以对应每一个Symbol.Color对象都需要创建一个Symbol对象。
// 创建文本颜色
Symbol textSymbol = new Symbol();
Symbol.Color textColor = textSymbol.new Color();
textColor.alpha = 255;
textColor.red = 0;
textColor.blue = 255;
textColor.green = 0;
// 创建背景颜色
Symbol bgSymbol = new Symbol();
Symbol.Color bgColor = bgSymbol.new Color();
bgColor.alpha = 150;
bgColor.red = 80;
bgColor.blue = 80;
bgColor.green = 80;
// 创建文本对象
TextItem textItem = new TextItem();
textItem.fontColor = textColor;
textItem.bgColor = bgColor;
textItem.fontSize = 30;
textItem.text = "欢迎使用百度地图SDK!";
textItem.pt = mMapView.getMapCenter();
// 创建文本图层
TextOverlay textOverlay = new TextOverlay(mMapView);
textOverlay.addText(textItem);
// 添加图层到地图
mMapView.getOverlays().add(textOverlay);
mMapView.refresh();
1.9 图片图层(GroundOverlay)
图片图层可以用来在地图上添加一个图片。图片将会随地图的平移、旋转、缩放做相应的操作。图片图层介于底图和底图标注信息(即图片图层不会遮挡地图标注信息),图片图层添加顺序不影响其他图层的相互关系。
// 新建Ground对象
GeoPoint centerPoint = new GeoPoint((int)(39.924 * 1E6),(int)(116.403 * 1E6));
Drawable d = getResources().getDrawable(R.drawable.liehuo_net_001);
Bitmap bitmap = ((BitmapDrawable) d).getBitmap();
Ground mGround = new Ground(bitmap, centerPoint, 5000, 3000);
// 新建GroundOverlay对象
GroundOverlay mGroundOverlay = new GroundOverlay(mMapView);
mGroundOverlay.addGround(mGround);
// 添加图层
mMapView.getOverlays().add(mGroundOverlay);
mMapView.refresh();
1.10 添加自定义View
MapView继承自ViewGroup,所以可以使用addView添加一个View对象,这部分较为简单,使用也较少,暂不介绍。
1.11 删除图层
删除图层可以调用,remove方法中的参数支持任意图层:
mMapView.getOverlays().remove(mGroundOverlay);
mMapView.refresh();
同时清除所有图层使用:
mMapView.getOverlays().clear();
mMapView.refresh();