其他文章:
安卓百度离线地图的下载以及使用
安卓百度地图(一)定位功能的实现、周边POI的检索
安卓百度地图(二)地图显示以及离线地图的下载使用)
安卓百度地图(四)城市,周边,区域检索
安卓百度地图(五)百度地图路线规划
安卓百度地图(六)鹰眼轨迹的上传,历史轨迹的显示
安卓百度地图(七)地理围栏的建立与使用
本文将对百度地图的绘制功能进行整理
一 简单介绍
百度地图的绘制包含:点标记、添加Marker、绘制自定义Marker、批量添加和删除Marker、Marker拖拽操作、点聚合、控制地图标注显示(包括POI和ICON)等做进一步的说明。
二 百度地图绘制
1. 点(Maker)的绘制
点标记用来在地图上标记任何位置,例如用户位置、车辆位置、店铺位置等一切带有位置属性的事物。点标记功能包含两大部分,一部分是点(俗称 Marker)、另一部分是浮于点上方的信息窗体(俗称 InfoWindow)。 封装了大量的触发事件,例如点击事件、长按事件、拖拽事件。
1.1 添加单个maker
//定义Maker坐标点
LatLng point = new LatLng(39.963175, 116.400244);
//构建Marker图标
BitmapDescriptor bitmap = BitmapDescriptorFactory.fromResource(R.drawable.icon_marka);
//构建MarkerOption,用于在地图上添加Marker
OverlayOptions option = new MarkerOptions()
.position(point)
.icon(bitmap);
//在地图上添加Marker,并显示
mBaiduMap.addOverlay(option);
在地图指定的位置上添加自定义的 Marker。MarkerOptions 是设置 Marker 参数变量的类,添加 Marker 时会经常用到。
支持的Marker常用属性如下:
名称 | 说明 | 名称 | 说明 |
---|---|---|---|
icon | 图标 | animateType | 动画类型 |
alpha | 透明度 | position | 位置坐标 |
perspective | 是否开启近大远小效果 | draggable | 是否可拖拽 |
flat | 是否平贴地图 | anchor | 锚点比例 |
rotate | 旋转角度 | title | 设置标题 |
visible | 是否可见 | extraInfo | 额外信息 |
1.2 批量添加maker
/创建OverlayOptions的集合
List options = new ArrayList();
//设置坐标点
LatLng point1 = new LatLng(39.92235, 116.380338);
LatLng point2 = new LatLng(39.947246, 116.414977);
//创建OverlayOptions属性
OverlayOptions option1 = new MarkerOptions()
.position(point1)
.icon(bdA);
OverlayOptions option2 = new MarkerOptions()
.position(point2)
.icon(bdA);
//将OverlayOptions添加到list
options.add(option1);
options.add(option2);
//在地图上批量添加
mBaiduMap.addOverlays(options);
注意:若需要动态改变图片,可以参考Android开发常用的工具类(三) ImageUtils添加文字或图片水印
1.3 批量删除maker
//清除地图上所有覆盖物,无法分成批删除
mBaiduMap.clear();
1.4 maker的动画效果
1.4.1 maker帧动画
// 通过Marker的icons设置一组图片,再通过period设置多少帧刷新一次图片资源
ArrayList giflist = new ArrayList();
giflist.add(bdA);
giflist.add(bdB);
giflist.add(bdC);
OverlayOptions ooD = new MarkerOptions()
.position(pt)
.icons(giflist)
.zIndex(0)
.period(10);
mMarkerD = (Marker) (mBaiduMap.addOverlay(ooD));
1.4.2 加载marker时增加动画
marker增加动画的能力, MarkerAnimateType包含3中方式: none (无效果)、drop(从天上掉下)、grow(从地面生长)
以生长动画为例,具体实现方法如下:
MarkerOptions ooD = new MarkerOptions().position(llD).icons(giflist)
.zIndex(0).period(10);
if (animationBox.isChecked()) {
// 生长动画
ooD.animateType(MarkerAnimateType.grow);
}
Marker mMarkerD = (Marker) (mBaiduMap.addOverlay(ooD));
1.5 maker的拖拽
1.5.1 设置可拖拽
OverlayOptions options = new MarkerOptions()
.position(llA) //设置Marker的位置
.icon(bdA) //设置Marker图标
.zIndex(9) //设置Marker所在层级
.draggable(true); //设置手势拖拽
//将Marker添加到地图上
marker = (Marker) (mBaiduMap.addOverlay(options));
1.5.2 设置监听方法
//调用BaiduMap对象的setOnMarkerDragListener方法设置Marker拖拽的监听
mBaiduMap.setOnMarkerDragListener(new OnMarkerDragListener() {
public void onMarkerDrag(Marker marker) {
//拖拽中
}
public void onMarkerDragEnd(Marker marker) {
//拖拽结束
}
public void onMarkerDragStart(Marker marker) {
//开始拖拽
}
});
1.5. 点聚合
可通过缩小地图层级,将定义范围内的多个标注点,聚合显示成一个标注点。
2.绘制线
2.1 绘制折线
//构建折线点坐标
LatLng p1 = new LatLng(39.97923, 116.357428);
LatLng p2 = new LatLng(39.94923, 116.397428);
LatLng p3 = new LatLng(39.97923, 116.437428);
List points = new ArrayList();
points.add(p1);
points.add(p2);
points.add(p3);
//绘制折线
OverlayOptions ooPolyline = new PolylineOptions()
.width(10)
.color(0xAAFF0000).points(points);
mPolyline = (Polyline) mBaiduMap.addOverlay(ooPolyline);
2.2 绘制虚线
先绘制普通折线,然后通过setDottedLine(enabled)来控制显示为虚线。
//设置是否虚线绘制
mPolyline.setDottedLine(enabled);
2.3 分段颜色绘制折线
通过构造PolylineOptions对象,添加折线分段颜色绘制覆盖物
// 构造折线点坐标
List points = new ArrayList();
points.add(new LatLng(39.965,116.404));
points.add(new LatLng(39.925,116.454));
points.add(new LatLng(39.955,116.494));
points.add(new LatLng(39.905,116.554));
points.add(new LatLng(39.965,116.604));
//构建分段颜色索引数组
List colors = new ArrayList<>();
colors.add(Integer.valueOf(Color.BLUE));
colors.add(Integer.valueOf(Color.RED));
colors.add(Integer.valueOf(Color.YELLOW));
colors.add(Integer.valueOf(Color.GREEN));
OverlayOptions ooPolyline = new PolylineOptions()
.width(10)
.colorsValues(colors)
.points(points);
//添加在地图中
Polyline mPolyline = (Polyline) mBaiduMap.addOverlay(ooPolyline);
2.4 分段纹理绘制
折线纹理素材格式:纹理图片须是正方形,宽高是2的整数幂,如64*64,否则无效;若设置了纹理图片,设置线颜色、连接类型和端点类型将无效。
注意:目前仅支持对折线设置纹理,其余覆盖物目前暂不支持设置纹理。
构造PolylineOptions对象,添加折线分段颜色绘制覆盖物:
//构建折线坐标点
LatLng p111 = new LatLng(39.865, 116.444);
LatLng p211 = new LatLng(39.825, 116.494);
LatLng p311 = new LatLng(39.855, 116.534);
LatLng p411 = new LatLng(39.805, 116.594);
List points11 = new ArrayList();
points11.add(p111);
points11.add(p211);
points11.add(p311);
points11.add(p411);
//添加纹理图片
List textureList = new ArrayList();
textureList.add(mRedTexture);
textureList.add(mBlueTexture);
textureList.add(mGreenTexture);
List textureIndexs = new ArrayList();
textureIndexs.add(0);
textureIndexs.add(1);
textureIndexs.add(2);
//构造PolylineOptions对象,并绘制
OverlayOptions ooPolyline11 = new PolylineOptions()
.width(20)
.points(points11)
.dottedLine(true)
.customTextureList(textureList)
.textureIndex(textureIndexs);
mTexturePolyline = (Polyline) mBaiduMap.addOverlay(ooPolyline11);
3. 绘制弧线和面弧线
3.1 绘制弧线
LatLng p1 = new LatLng(39.97923, 116.357428);
LatLng p2 = new LatLng(39.94923, 116.397428);
LatLng p3 = new LatLng(39.97923, 116.437428);
OverlayOptions ooArc = new ArcOptions()
.color(0xAA00FF00)
.width(4)
//设置颜色和透明度,均使用16进制显示,0xAARRGGBB,如 0xAA00FF00 其中AA是透明度,00FF00为颜色
.points(p1, p2, p3);
mBaiduMap.addOverlay(ooArc);
3.1 绘制圆
LatLng llCircle = new LatLng(39.90923, 116.447428);
OverlayOptions ooCircle = new CircleOptions()
.fillColor(0x000000FF)
.center(llCircle)
//通过stroke属性即可设置线的颜色及粗细,new Stroke(5, 0xAA000000) 5为线宽,0xAA000000 为颜色
.stroke(new Stroke(5, 0xAA000000))
//设置颜色和透明度,均使用16进制显示,0xAARRGGBB,如 0xAA000000 其中AA是透明度,000000为颜色
.radius(1400);
mBaiduMap.addOverlay(ooCircle);
3.1 绘制多边形
支持设置多边形边框的颜色和宽度,以及填充的颜色及透明度
//定义多边形的五个顶点
LatLng pt1 = new LatLng(39.93923, 116.357428);
LatLng pt2 = new LatLng(39.91923, 116.327428);
LatLng pt3 = new LatLng(39.89923, 116.347428);
LatLng pt4 = new LatLng(39.89923, 116.367428);
LatLng pt5 = new LatLng(39.91923, 116.387428);
List pts = new ArrayList();
pts.add(pt1);
pts.add(pt2);
pts.add(pt3);
pts.add(pt4);
pts.add(pt5);
//构建用户绘制多边形的Option对象
OverlayOptions polygonOption = new PolygonOptions()
.points(pts)
.stroke(new Stroke(5, 0xAA00FF00))
.fillColor(0xAAFFFF00);
//在地图上添加多边形Option,用于显示
mBaiduMap.addOverlay(polygonOption);
4.文字及信息窗
4.1绘制文字
//定义文字所显示的坐标点
LatLng llText = new LatLng(39.86923, 116.397428);
//构建文字Option对象,用于在地图上添加文字
OverlayOptions textOption = new TextOptions()
.bgColor(0xAAFFFF00)
.fontSize(24)
.fontColor(0xFFFF00FF)
.text("百度地图SDK")
.rotate(-30)
.position(llText);
//在地图上添加该文字对象并显示
mBaiduMap.addOverlay(textOption);
4.2 绘制信息窗
/创建InfoWindow展示的view
Button button = new Button(getApplicationContext());
button.setBackgroundResource(R.drawable.popup);
//定义用于显示该InfoWindow的坐标点
LatLng pt = new LatLng(39.86923, 116.397428);
//创建InfoWindow , 传入 view, 地理坐标, y 轴偏移量
InfoWindow mInfoWindow = new InfoWindow(button, pt, -47);
//显示InfoWindow
mBaiduMap.showInfoWindow(mInfoWindow);
本文主要做于收集整理笔记使用,关于文章的源码,请移步我的GitHub