安卓百度地图(三)绘制点、线等图层信息

其他文章:
安卓百度离线地图的下载以及使用
安卓百度地图(一)定位功能的实现、周边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<OverlayOptions> options = new ArrayList<OverlayOptions>();

//设置坐标点
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<BitmapDescriptor> giflist = new ArrayList<BitmapDescriptor>();
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<LatLng> points = new ArrayList<LatLng>();
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<LatLng> points = new ArrayList<LatLng>();
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<Integer> 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<LatLng> points11 = new ArrayList<LatLng>();
points11.add(p111);
points11.add(p211);
points11.add(p311);
points11.add(p411);

//添加纹理图片
List<BitmapDescriptor> textureList = new ArrayList<BitmapDescriptor>();
textureList.add(mRedTexture);
textureList.add(mBlueTexture);
textureList.add(mGreenTexture);
List<Integer> textureIndexs = new ArrayList<Integer>();
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<LatLng> pts = new ArrayList<LatLng>();  
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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345