百度地图开发-绘制点线提示框 07

简介: 百度地图开发-绘制点线提示框 07

上一篇推文简单介绍了与地图的交互,如移动,缩放,点击,截图等功能,都是很常见的业务。接下来就让我们一起学习在地图上面打点,标注信息,绘制线和面等功能。



标记点、绘制线、面、增加提示信息


关于在百度地图上绘制点的功能,其实有很大的作用,比如我们在地图中查询饭店,满足要求的都可以用标记点的形式展示出来,用户可以一目了然的看到具体位置。同时如果可以在标记的点上添加对应饭店的弹窗信息,那么用户就更能清晰的看到。


点标记


点标记用来在地图上标记任何位置,例如用户位置、车辆位置、店铺位置等一切带有位置属性的事物。


添加点标记


 //取得当前的位置
    LatLng point=new LatLng(currentLocation.getLatitude(),currentLocation.getLongitude());
    //构建Marker图标
    BitmapDescriptor bitmap= BitmapDescriptorFactory.fromResource(R.drawable.flag);
    //在地图上添加Marker并显示
    mBaiduMap.addOverlay(new MarkerOptions().position(point).icon(bitmap));



点击添加标记后,就可以在当前位置处添加标记信息。


标记点


对于Marker,百度官方还是给的自定义权限挺高的,可以对其进行设置图标、动画类型、透明度、是否可拖拽、标题等都可进行调整,根据需求进行自定义操作。同时教程说还可对标记点增加点击和拖拽事件。


绘制线


根据对应的教程写法,可以实现绘制折线、虚线、分段颜色绘制线、分段纹理绘制线,通过整个功能可以绘制各种各样的规划路线或物体轨迹。


 //构建折线点坐标
    LatLng p1 = new LatLng(39.077218, 117.072102);
    LatLng p2 = new LatLng(39.007423, 117.110989);
    LatLng p3 = new LatLng(39.077218, 117.172345);
    List<LatLng> points = new ArrayList<LatLng>();
    points.add(p1);
    points.add(p2);
    points.add(p3);
    //设置折线的属性
    OverlayOptions mOverlayOptions = new PolylineOptions()
              .width(10)
              .color(0xAAFF0000)
              .points(points);
    //在地图上绘制折线
    Overlay mPolyline = mBaiduMap.addOverlay(mOverlayOptions);



对于线的属性有多种可供设置的,常用属性如下:color颜色、width宽度、Points坐标列表、colorsvalues分段颜色值列表、extralnfo额外信息等都是可以进行调整的。


也可以添加线的点击事件,当某些场合需要点击绘制的路线时可以使用。


对于绘制这块还可以绘制弧线,绘制多边形,绘制圆等可以参考百度地图教程自己按需进行实现即可。


接下来添加文字和信息窗,其实也就是弹窗信息。


文字覆盖物


其实就是在地图的某一个点,来用文字来进行表示


LatLng ll=new LatLng(39.077218,117.072102);
 OverlayOptions mTextOptions=new TextOptions().text("阿辉最牛逼")
    .bgColor(0xAAFFFF00) //背景色
    .fontSize(24) //字号
    .fontColor(0xFFFF00FF) //文字颜色
    .rotate(-30) //旋转角度
    .position(ll);
  Overlay mText=mBaiduMap.addOverlay(mTextOptions);



添加信息框


这块教程中说了两种方式可以实现信息框的显示,一种是使用View构造InfoWindow另一种是使用BitmpDescriptor构造InfoWindow。我们这里简单实现下第一种即可。


 //添加信息框
    Button button=new Button(getApplicationContext());
    button.setBackgroundResource(R.drawable.flag);
    button.setText("你好阿辉");
    LatLng p1 = new LatLng(39.007423, 117.110989);
    mBaiduMap.showInfoWindow(new InfoWindow(button,p1,-100));


弹出框


这里我只是临时找了一个图片来弹出框的底图的,先把功能实现了再说。大家在使用的过程中要做一些好看一点的图,这样子软件的整体美观就提高了。


基本上和地图的交互就介绍到这里,目前只是简单的说了说比较常用的,至于一些细节功能还是需要去看看百度的官方文档,虽然我对那文档不是很感冒。

目录
相关文章
|
6月前
|
开发工具 git 开发者
百度搜索:蓝易云【Git实际开发的流程】
以上是Git在实际开发中的一般流程。Git的分布式版本控制系统使得团队开发更加高效和灵活,并能有效管理项目的版本历史。
62 1
|
机器学习/深度学习 定位技术 容器
百度地图高级开发:map.getDistance计算多点之间的距离并输入矩阵
百度地图高级开发:map.getDistance计算多点之间的距离并输入矩阵
286 0
|
4月前
|
定位技术 开发者
百度地图开发 —— 获取百度地图开发的 AK
百度地图开发 —— 获取百度地图开发的 AK
355 3
|
4月前
|
JavaScript 定位技术
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
264 1
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
165 0
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
421 0
|
6月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
移动开发 JavaScript 前端开发
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
205 0
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
290 0
|
定位技术 API 容器
百度地图API开发:停车场分布标注和检索静态版
百度地图API开发:停车场分布标注和检索静态版
152 0