百度地图在合适视野范围内显示所有的点

通常地图会显示出多个点,如像行驶轨迹等,往往在屏幕上一次性就全部显示出来,那要怎么设置地图的显示宽高,才能将所有的点合理的显示出来呢。

看看以下的代码实现:

 private void setMyLocation() {
        list = new ArrayList<>();
        LatLng ll = new LatLng(24.475982,
                118.093132);
        LatLng ll1 = new LatLng(24.477382,
                118.093232);
        LatLng ll2 = new LatLng(24.478382,
                118.093832);
        LatLng ll3 = new LatLng(24.487382,
                118.094232);
        LatLng ll4 = new LatLng(24.497982,
                118.099562);

        list.add(ll);
        list.add(ll1);
        list.add(ll2);
        list.add(ll3);
        list.add(ll4);

        MapStatus.Builder builder = new MapStatus.Builder();
        builder.target(ll).zoom(18.0f);
//        mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder.build()));
        for (LatLng latLng : list) {
            mBaiduMap.addOverlay(new BaiduMapUtil().setMarker(latLng));
        }

        mBaiduMap.addOverlay(new BaiduMapUtil().Polyline(list));

//将所有的坐标显示出来的合理视图
        if (isFrist) {
            mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() {

                @Override
                public void onMapLoaded() {
                    isFrist=false;
                    mBaiduMap.animateMapStatus(new BaiduMapUtil().setLatLngBounds(list, mMapView));
                }
            });
        }else{
            mBaiduMap.animateMapStatus(new BaiduMapUtil().setLatLngBounds(list, mMapView));
        }

    }


以下为工具类BaiduMapUtil的具体实现

public class BaiduMapUtil {

    /**
     * 绘制Marker,地图上常见的类似气球形状的图层
     */
    public MarkerOptions setMarker(LatLng latLng) {
        return setMarker(latLng, R.drawable.icon_defult_marker);
    }


    public MarkerOptions setMarker(LatLng latLng, int drawableId) {
        MarkerOptions markerOptions = new MarkerOptions();//参数设置类
        markerOptions.position(latLng);//marker坐标位置
        markerOptions.icon(BitmapDescriptorFactory
                .fromResource(drawableId));//marker图标,可以自定义
        markerOptions.draggable(false);//是否可拖拽,默认不可拖拽
        markerOptions.anchor(0.5f, 1.0f);//设置 marker覆盖物与位置点的位置关系,默认(0.5f, 1.0f)水平居中,垂直下对齐
        markerOptions.alpha(0.8f);//marker图标透明度,0~1.0,默认为1.0
        markerOptions.animateType(MarkerOptions.MarkerAnimateType.none);//marker出现的方式,从天上掉下
        markerOptions.flat(false);//marker突变是否平贴地面
        markerOptions.zIndex(1);//index
        return markerOptions;
    }

    /**
     * 绘制折线
     */
    public PolylineOptions Polyline(List<LatLng> points) {
        PolylineOptions polylineOptions = new PolylineOptions();//参数设置类
        polylineOptions.width(10);//宽度,单位:像素
        polylineOptions.color(0xAAFF0000);//设置折线颜色
        polylineOptions.points(points);//折线顶点坐标集
        return polylineOptions;
    }

    /**
     * 多个点,在Android里面显示合理的缩放级
     */
    public MapStatusUpdate setLatLngBounds(List<LatLng> points, MapView mMapView) {
        LatLngBounds.Builder builder2 = new LatLngBounds.Builder();
        for (LatLng p : points) {
            builder2 = builder2.include(p);
        }
        LatLngBounds latlngBounds = builder2.build();
        MapStatusUpdate u = MapStatusUpdateFactory.newLatLngBounds(latlngBounds, mMapView.getWidth(), mMapView.getHeight());
        return u;
    }


}

//将所有的坐标显示出来的合理视图
        if (isFrist) {
            mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() {

                @Override
                public void onMapLoaded() {
                    isFrist=false;
                    mBaiduMap.animateMapStatus(new BaiduMapUtil().setLatLngBounds(list, mMapView));
                }
            });
        }else{
            mBaiduMap.animateMapStatus(new BaiduMapUtil().setLatLngBounds(list, mMapView));
        }
这段代码为显示合理范围的核心代码,加入是否为首次的判断,因为要在 OnMapLoadedCallback中实现是关键,否则mapview的with和height取得是0,如果在其他视觉范围内,想恢复到这个合理的范围则经过首次加载后,就不会再执行OnMapLoadedCallback方法,所以要判断是否为第一次加载的状态。




  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用百度地图Flutter插件来将所有的标记(marker)显示在屏幕内。首先,你需要在Flutter项目中引入百度地图插件,可以在`pubspec.yaml`文件中添加如下依赖: ``` dependencies: flutter_baidu_map: ^x.x.x ``` 然后运行`flutter packages get`命令来获取插件。接下来,你可以在需要显示地图的页面中使用`BaiduMap`组件。在此组件中,你可以设置地图的中心和缩放级别。 为了将所有的标记显示在屏幕内,你需要先获取所有标记的经纬度坐标。然后,使用`BaiduMapController`提供的`setViewport`方法来调整地图的视野范围,使得所有标记都能显示在屏幕内。示例代码如下: ```dart import 'package:flutter_baidu_map/flutter_baidu_map.dart'; class MapScreen extends StatefulWidget { @override _MapScreenState createState() => _MapScreenState(); } class _MapScreenState extends State<MapScreen> { BaiduMapController _mapController; List<LatLng> _markerCoordinates = [ LatLng(39.909187, 116.397451), // 假设有多个标记 LatLng(39.908724, 116.397456), LatLng(39.907372, 116.397951), // ... ]; @override Widget build(BuildContext context) { return Scaffold( body: BaiduMap( onCreated: (controller) { _mapController = controller; _adjustViewport(); // 在地图创建后调整视野范围 }, ), ); } void _adjustViewport() { if (_mapController != null && _markerCoordinates.isNotEmpty) { double minLat = _markerCoordinates[0].latitude; double maxLat = _markerCoordinates[0].latitude; double minLng = _markerCoordinates[0].longitude; double maxLng = _markerCoordinates[0].longitude; // 计算标记的最小和最大经纬度 for (LatLng coordinate in _markerCoordinates) { minLat = min(minLat, coordinate.latitude); maxLat = max(maxLat, coordinate.latitude); minLng = min(minLng, coordinate.longitude); maxLng = max(maxLng, coordinate.longitude); } // 调整地图视野范围 LatLngBounds bounds = LatLngBounds( southwest: LatLng(minLat, minLng), northeast: LatLng(maxLat, maxLng), ); _mapController.setViewport(bounds); } } } ``` 这样,地图将会自动调整视野,使得所有的标记都能显示在屏幕内。你可以根据需要修改标记的经纬度坐标和其他地图的参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值