控制台

动态调整地图展示整屏Marker

该示例展示如何动态调整地图缩放级别，将所有Marker容纳在一个屏幕范围内
iOS Android
下载源代码
00:00 / 00:12
体验移动端 扫码体验移动端

使用场景

可用于将所有动态加载的Annotation覆盖物（可以是车，也可以是任何带有经纬度坐标的事物）调整至同一屏幕中显示，便于用户概览。

用到产品

iOS 地图 SDK

核心类/接口

类

接口

说明

版本

MAMapView

setVisibleMapRect

设置地图显示范围

V1.0.0版本起

核心难点

Objective-CSwift
/**
* brief 根据传入的annotation来展现：保持中心点不变的情况下，展示所有传入annotation
* @param annotations annotation
* @param insets 填充框，用于让annotation不会靠在地图边缘显示
* @param mapView 地图view
*/
- (void)showsAnnotations:(NSArray *)annotations edgePadding:(UIEdgeInsets)insets andMapView:(MAMapView *)mapView {
    MAMapRect rect = MAMapRectZero;

    for (MAPointAnnotation *annotation in annotations) {

        ///annotation相对于中心点的对角线坐标
        CLLocationCoordinate2D diagonalPoint = CLLocationCoordinate2DMake(mapView.centerCoordinate.latitude - (annotation.coordinate.latitude - mapView.centerCoordinate.latitude),mapView.centerCoordinate.longitude - (annotation.coordinate.longitude - mapView.centerCoordinate.longitude));

        MAMapPoint annotationMapPoint = MAMapPointForCoordinate(annotation.coordinate);
        MAMapPoint diagonalPointMapPoint = MAMapPointForCoordinate(diagonalPoint);

        ///根据annotation点和对角线点计算出对应的rect（相对于中心点）
        MAMapRect annotationRect = MAMapRectMake(MIN(annotationMapPoint.x, diagonalPointMapPoint.x), MIN(annotationMapPoint.y, diagonalPointMapPoint.y), ABS(annotationMapPoint.x - diagonalPointMapPoint.x), ABS(annotationMapPoint.y - diagonalPointMapPoint.y));

        rect = MAMapRectUnion(rect, annotationRect);
    }

    [mapView setVisibleMapRect:rect edgePadding:insets animated:YES];
}
/// 根据传入的annotation来展现：保持中心点不变的情况下，展示所有传入annotation
///
/// - Parameters:
///   - annotations: annotation
///   - insets: 填充框，用于让annotation不会靠在地图边缘显示
///   - mapView: 地图view
func showsAnnotations(_ annotations:Array<MAPointAnnotation>, edgePadding insets:UIEdgeInsets, andMapView mapView:MAMapView!) {
    var rect:MAMapRect = MAMapRectZero

    for annotation:MAPointAnnotation in annotations {
        let diagonalPoint:CLLocationCoordinate2D = CLLocationCoordinate2DMake(mapView.centerCoordinate.latitude - (annotation.coordinate.latitude - mapView.centerCoordinate.latitude),mapView.centerCoordinate.longitude - (annotation.coordinate.longitude - mapView.centerCoordinate.longitude))

        let annotationMapPoint: MAMapPoint = MAMapPointForCoordinate(annotation.coordinate)
        let diagonalPointMapPoint: MAMapPoint = MAMapPointForCoordinate(diagonalPoint)

        let annotationRect:MAMapRect = MAMapRectMake(min(annotationMapPoint.x, diagonalPointMapPoint.x), min(annotationMapPoint.y, diagonalPointMapPoint.y), abs(annotationMapPoint.x - diagonalPointMapPoint.x), abs(annotationMapPoint.y - diagonalPointMapPoint.y));

        rect = MAMapRectUnion(rect, annotationRect)
    }

    mapView.setVisibleMapRect(rect, edgePadding: insets, animated: true)
}


下载源代码
00:00 / 00:12
体验移动端 扫码体验移动端

使用场景

可用于将所有动态加载的Marker覆盖物（可以是车，也可以是任何带有经纬度坐标的事物）调整至同一屏幕中显示，便于用户概览。

用到产品

Android 地图 SDK

核心类/接口

类

接口

说明

版本

CameraUpdateFactory

newLatLngBounds(LatLngBounds bounds, int padding)

返回CameraUpdate对象，这个对象包含一个经纬度限制的区域，并且是最大可能的缩放级别。你可以设置一个边距数值来控制插入区域与view的边框之间的空白距离。方法必须在地图初始化完成之后使用。

V1.0.0版本起

LatLngBounds

including(LatLng point)

返回一个新的矩形区域。新区域是根据传入的经纬度对原有区域进行最小的扩展。多次调用此方法即可。 这个方法将选择向东或向西方向扩展，期间扩展面积相对较小一个区域。如果相同，则优先向东方向扩展。

V1.0.0版本起

核心难点

以下为当前示例用到的核心方法：

Java
/**
     * 缩放移动地图，保证所有自定义marker在可视范围中，且地图中心点不变。
     */
    public void zoomToSpanWithCenter() {
        if (pointList != null && pointList.size() > 0) {
            if (aMap == null)
                return;
            centerMarker.setVisible(true);
            centerMarker.showInfoWindow();
            LatLngBounds bounds = getLatLngBounds(centerPoint, pointList);
            aMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50));
        }
    }

    //根据中心点和自定义内容获取缩放bounds
    private LatLngBounds getLatLngBounds(LatLng centerpoint, List<LatLng> pointList) {
        LatLngBounds.Builder b = LatLngBounds.builder();
        if (centerpoint != null){
            for (int i = 0; i < pointList.size(); i++) {
                LatLng p = pointList.get(i);
                LatLng p1 = new LatLng((centerpoint.latitude * 2) - p.latitude, (centerpoint.longitude * 2) - p.longitude);
                b.include(p);
                b.include(p1);
            }
        }
        return b.build();
    }

    /**
     *  缩放移动地图，保证所有自定义marker在可视范围中。
     */
    public void zoomToSpan() {
        if (pointList != null && pointList.size() > 0) {
            if (aMap == null)
                return;
            centerMarker.setVisible(false);
            LatLngBounds bounds = getLatLngBounds(pointList);
            aMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50));
        }
    }
    /**
     * 根据自定义内容获取缩放bounds
     */
    private LatLngBounds getLatLngBounds( List<LatLng> pointList) {
        LatLngBounds.Builder b = LatLngBounds.builder();
        for (int i = 0; i < pointList.size(); i++) {
             LatLng p = pointList.get(i);
             b.include(p);
         }
        return b.build();
    }
返回顶部 示例中心 常见问题 智能客服 公众号
二维码