百度地图绘制点、图形

Big_fat_cat 发布于2019-08-19 11:09 / 1678人阅读

摘要：目标，指定经纬度，显示一个图片，点击图片能显示相应的介绍信息，当前屏幕把所有指定的坐标点都显示出来预览效果添加了四个点，红色定位图片表示出来实现准备条件配置百度地图，只要能能显示百度地图就定位图片四个点经纬度代码实现构建图标初始化四个点创建

目标：

1，指定经纬度，显示一个图片，点击图片能显示相应的介绍信息
2，当前屏幕把所有指定的坐标点都显示出来

预览效果:添加了四个点，红色定位图片表示出来

实现

准备条件：
配置百度地图，只要能findViewById（R.id.baidumap）能显示百度地图就ok
定位图片

四个点经纬度

   (23.17859302386026,113.41829099999994);
   (23.174924078737078,113.41754841746837);
   (23.172392232625878,113.41464769219638);
   (23.15051685805627,113.4161170382473);

代码实现

        //构建Marker图标
        BitmapDescriptor bd = BitmapDescriptorFactory
                .fromResource(R.drawable.location_ic_select);

        // 初始化四个点
        List list = new ArrayList<>();
        LatLng point1 = new LatLng(23.17859302386026,113.41829099999994);
        LatLng point2 = new LatLng(23.174924078737078,113.41754841746837);
        LatLng point3 = new LatLng(23.172392232625878,113.41464769219638);
        LatLng point4 = new LatLng(23.15051685805627,113.4161170382473);
        list.add(point1);
        list.add(point2);
        list.add(point3);
        list.add(point4);

        //创建OverlayOptions的集合
        List options = new ArrayList();
        for(LatLng point:list){
            //创建OverlayOptions属性
            OverlayOptions option1 =  new MarkerOptions()
                    .position(point)
                    .icon(bd);
            //将OverlayOptions添加到list
            options.add(option1);
        }
        //在地图上批量添加
        mBaiduMap.addOverlays(options);
        // 让手机屏幕显示出所有点
        mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() {
            @Override
            public void onMapLoaded() {
               
                LatLngBounds.Builder builder = new LatLngBounds.Builder();
                for(LatLng latLng : list){
                    builder = builder.include(latLng);
                }
                LatLngBounds latlngBounds = builder.build();
                MapStatusUpdate u = MapStatusUpdateFactory.newLatLngBounds(latlngBounds,mMapView.getWidth(),mMapView.getHeight());
                mBaiduMap.animateMapStatus(u);
            }
        });

以上代码便能在地图上显示出四个点了

 3. 图标点击事件：点击图标后显示一些信息

            // 每个图标都是一个Marker，通过百度地图的Marker的点击事件来达到想要的效果
            mBaiduMap.setOnMarkerClickListener(new BaiduMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
                // 构建一个需要显示的view，我这里只是一个textview，也可以是其他的布局
                TextView tv = new TextView(mContext);
                tv.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
                tv.setBackgroundResource(R.drawable.shape_buttn_text);
                tv.setText("hello world");
                // －130表示的是y轴的便宜量
                InfoWindow infoWindow =new InfoWindow(tv,marker.getPosition(),-130);
                //通过百度地图来显示view
                mBaiduMap.showInfoWindow(infoWindow);
                return true;
            }
        });

    4. 点击非图标区域隐藏Marker

        // 我这里的解决方法是设置地图底图的点击事件，来隐藏marker
        mMapView.getChildAt(0).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mBaiduMap.hideInfoWindow();
            }
        });

结束

GPU云服务器云服务器图形绘制 Android绘制图形 html绘制图形代码 html绘制图形排列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77102.html

百度地图开发实例番外篇--实用方法（持续更新）

摘要：一前言在使用百度地图开发的过程中，查阅百度地图官网基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。希望百度地图能够越来越强大，这样开发者就可以愉快的开发了一前言在使用百度地图开发的过程中，查阅百度地图官网demo基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。笔者特意把开发过程中遇到的一些疑难杂症和解...

CocoaChina 2019-08-22 13:53 评论0 收藏0
vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0
echarts 与 highcharts

摘要：渲染能力采用渲染除了对使用，一般来说，更适合绘制图形元素数量非常大这一般是由数据量大导致的图表如热力图地理坐标系或平行坐标系上的大规模线图或散点图等，也利于实现某些视觉特效如交通图。一．简介 echartsecharts是百度公司前端开发的一个图表库，2013年发布第一版，主要采用canvas画图，目前版本3.8.4；完全免费； highcharthighcharts是国外的一家公司...

王笑朝 2019-08-22 17:35 评论0 收藏0
mxGraph使用经验总结

摘要：边绘制成折线的时候为两种形式，默认是通过贝塞尔曲线绘制成带圆角的折线，另一种是直角折线。在开发中我对边的绘制方式进行了小小的修改，统一改为直接使用三次贝塞尔曲线连接，具体代码如下调用内置函数绘制三次贝塞尔曲线忽略后面绘制折线的代码参考 mxGraph是一个支持多种语言（Java、JavaScript、PHP、.NET）的画图框架，所绘制的图形可以在主流浏览器以及原生应用上使用。mxGr...

k00baa 2019-08-26 13:58 评论0 收藏0