Maps SDK Tutorial Series - shows the designated area on the map

Tencent Location Map SDK is a variety of location-based services application program interface. By calling this interface, developers can add their own map application-related functions (such as map display, labeling, drawing graphics, etc.), easy access to Tencent map services and data, to build feature-rich, interactive, in line with a variety of industries map class application scenarios.

 

The following is reproduced from iOS engineer Genosage article "Maps SDK tutorial series - display the specified area on the map,"
Author: Genosage
link: https://juejin.im/post/5d721a29f265da03970bdc8d
Source: Nuggets
copyright reserved by the authors. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.

 

 

Maps SDK Tutorial Series - shows the designated area on the map

Tencent process using the SDK in iOS map, you will possibly need a map showing the specified area of ​​the scene, I believe we will encounter a similar situation, Maps SDK provides a number of related interfaces, these interfaces will this article integration, and provides sample code to display the plurality of scenes designated region demand.

Note that this article does not apply to map rotation and pitch angle of the scene occurred.

Maps SDK for iOS Tencent download go to: iOS SDK map

Designated region comprises a single coordinate point

Displayed on the map coordinates of a fixed point is one of the most basic functions of the map SDK.

For example, we obtained according to the search function of the coordinates of the SDK (39.881190,116.410490) Temple of Heaven Park, Next, we can set the center of the map  centerCoordinate to make the map show the coordinates, we can also set  zoomLevel to specify the zoom level:

// set the center point 
self.mapView.centerCoordinate = CLLocationCoordinate2DMake (39.881190,116.410490 );     

// set the zoom level 
self.mapView.zoomLevel = 15;

 

Display as follows:

 

 

 

To show Mercator coordinate point  QMapPoint is required by the process to  QCoordinateForMapPoint(QMapPoint mapPoint) convert the latitude and longitude coordinates Mercator further provided.

Designated area comprising a plurality of coordinate points

Now, if we want to Tiantan Park search results are displayed on the map, how to achieve it?

First, we search through the search function Tiantan Park, take the first nine coordinate points of the search results, then, should we make of this map view contains nine point coordinates, maps SDK provides a method of  QBoundingCoordinateRegionWithCoordinates(CLLocationCoordinate2D *coordinates, NSUInteger count) minimal computing a plurality of points of latitude and longitude coordinates bounding rectangle  QCoordinateRegion after obtaining a bounding rectangle, we can directly map  region to the area we want to display, complete code is as follows:

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];

 

显示效果如下:

 

 

Guess you like

Origin www.cnblogs.com/Yi-Xiu/p/11671522.html