地图 SDK 系列教程-在地图上展现指定区域

在使用腾讯 iOS 地图 SDK 的过程当中，常常会遇到须要地图展现指定区域的场景，相信你们也会遇到相似的状况，地图 SDK 提供了许多与之相关的接口，本篇文章将对这些接口进行整合，并提供示例代码来实现多个场景下展现指定区域的需求。

须要注意，本篇文章适用于地图未发生旋转与俯仰角的场景。

下载腾讯 iOS 地图 SDK 请前往：iOS 地图 SDK

指定区域包含单个坐标点

在地图上显示某个固定的坐标点是地图 SDK 最为基础的功能之一。

举例来讲，咱们根据 SDK 的检索功能获得了天坛公园的坐标 (39.881190,116.410490)，接下来，咱们能够经过设置地图的中心点 centerCoordinate 来让地图显示这个坐标，同时咱们还能够设置 zoomLevel 来指定缩放级别：

// 设置中心点
self.mapView.centerCoordinate = CLLocationCoordinate2DMake(39.881190,116.410490);    

// 设置缩放级别
self.mapView.zoomLevel = 15;
复制代码

显示效果以下：

若是想展现墨卡托坐标点 QMapPoint 则须要先经过方法 QCoordinateForMapPoint(QMapPoint mapPoint) 将墨卡托坐标转换为经纬度再进行设置。

指定区域包含多个坐标点

如今，假如咱们想把天坛公园的搜索结果都显示在地图上，应该如何实现呢？

首先，咱们经过检索功能搜索天坛公园，取搜索结果的前九个坐标点，接下来，应该使咱们的地图视野包含这九个坐标点，地图 SDK 提供了方法 QBoundingCoordinateRegionWithCoordinates(CLLocationCoordinate2D *coordinates, NSUInteger count) 来计算多个经纬度坐标点的最小外接矩形 QCoordinateRegion 在获得了外接矩形以后，咱们能够直接设置地图的 region 来使其显示咱们想要的区域，完整代码以下：

CLLocationCoordinate2D coordinates[9];

// 天坛公园检索结果坐标
coordinates[0] = CLLocationCoordinate2DMake(39.881190,116.410490);
coordinates[1] = CLLocationCoordinate2DMake(39.883247,116.400063);
coordinates[2] = CLLocationCoordinate2DMake(39.883710,116.412900);
coordinates[3] = CLLocationCoordinate2DMake(39.883654,116.412863);
coordinates[4] = CLLocationCoordinate2DMake(39.883320,116.400040);
coordinates[5] = CLLocationCoordinate2DMake(39.876980,116.413190);
coordinates[6] = CLLocationCoordinate2DMake(39.878160,116.413140);
coordinates[7] = CLLocationCoordinate2DMake(39.878980,116.407080);
coordinates[8] = CLLocationCoordinate2DMake(39.878560,116.413160);
    
// 计算区域外接矩形
QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinates(coordinates, 9);
    
// 设置区域
self.mapView.region = region;
复制代码

显示效果以下：

指定中心点

若是咱们想显示这九个坐标点的同时指定某个坐标点为地图中心点，可使用方法 QBoundingCoordinateRegionWithCoordinatesAndCenter(CLLocationCoordinate2D *coordinates, NSUInteger count, CLLocationCoordinate2D centerCoordinate) 来计算最小外接矩形，以天坛公园为中心点举例，相关代码以下：

// 中心点坐标
CLLocationCoordinate2D centerCoordinate = CLLocationCoordinate2DMake(39.881190,116.410490);

// 计算以中心点为中心的区域外接矩形
QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinatesAndCenter(coordinates, 9, centerCoordinate);
    
// 设置区域
self.mapView.region = region;
复制代码

显示效果以下：

嵌入四周边界

若是须要在地图视野四周嵌入一些边界，可使用方法 - (void)setRegion:(QCoordinateRegion)region edgePadding:(UIEdgeInsets)insets animated:(BOOL)animated 对地图的 region 进行设置，代码以下：

// 计算区域外接矩形
QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinates(coordinates, 9);
    
// 设置区域与边界
[self.mapView setRegion:region edgePadding:UIEdgeInsetsMake(20, 20, 20, 20) animated:NO];
复制代码

显示效果以下：

墨卡托坐标点

若是须要展现多个墨卡托坐标点，可使用地图 SDK 提供的与上述方法对应的 QBoundingMapRectWithPoints(QMapPoint *points, NSUInteger count) 和 - (void)setVisibleMapRect:(QMapRect)mapRect edgePadding:(UIEdgeInsets)insets animated:(BOOL)animated 等方法。

折线与覆盖物

当咱们想在地图中展现路线或者覆盖物时，即地图 SDK 中的 QPolyline QPolygon 和 QCircle，咱们能够直接得到他们的属性 boundingMapRect 再进行设置便可。

指定区域包含多个标注

在不少场景下，咱们须要在地图上添加标注点 (Annotation) 而且自定义这些标注的 Image，以下所示：

咱们能够经过下面的代码来使这些标注恰好显示在地图视野内：

// 计算包含 Annotation 与 MapRect 的外接矩形
QMapRect rect = [self.mapView mapRectThatFits:QMapRectNull containsCalloutView:NO annotations:self.annotations edgePadding:UIEdgeInsetsZero];
    
// 设置区域
self.mapView.visibleMapRect = rect;
复制代码

显示效果以下：

当标注显示 Callout View 时，咱们能够经过传入参数 bContainsCalloutView 为 YES 来将 Callout View 包含在地图视野内，显示效果以下：

有时咱们须要指定区域同时包含当前的屏幕视野以及全部的标注，咱们能够经过传入第一个参数 mapRect 为 self.mapView.visibleMapRect 来达到咱们想要的效果。

限制展现指定的区域

当咱们须要限制地图视野，使其只显示咱们指定的区域时，以故宫举例，能够经过以下的代码进行设置：

CLLocationCoordinate2D coordinates[4];

// 故宫范围矩形的四个顶点的经纬度坐标
coordinates[0] = CLLocationCoordinate2DMake(39.922878,116.391547);
coordinates[1] = CLLocationCoordinate2DMake(39.912917,116.392100);
coordinates[2] = CLLocationCoordinate2DMake(39.913312,116.402507);
coordinates[3] = CLLocationCoordinate2DMake(39.923277,116.402024);
    
// 计算区域外接矩形
QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinates(coordinates, 4);
    
// 计算平面投影矩形
QMapRect rect = QMapRectForCoordinateRegion(region);
    
// 限制展现区域
[self.mapView setLimitMapRect:rect mode:QMapLimitRectFitWidth];
复制代码

显示效果以下：