zoukankan      html  css  js  c++  java
  • 地图 SDK 系列教程-在地图上展示指定区域(转载)

    腾讯位置服务地图SDK是一套提供多种地理位置服务的应用程序接口。通过调用该接口,开发者可以在自己的应用中加入地图相关的功能(如地图展示、标注、绘制图形等),轻松访问腾讯地图服务和数据,构建功能丰富、交互性强、符合各种行业场景的地图类应用程序。
    以下内容转载自iOS 工程师Genosage的文章《地图 SDK 系列教程-在地图上展示指定区域》
    作者:Genosage
    链接:https://juejin.im/post/5d721a29f265da03970bdc8d
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

    显示效果如下:

  • 相关阅读:
    hdu 1269 迷宫城堡 (并查集)
    hdu 1272 小希的迷宫 (深搜)
    hdu 1026 Ignatius and the Princess I (深搜)
    hdu 1099 Lottery
    hdu 1068 Girls and Boys (二分匹配)
    几个基础数位DP(hdu 2089,hdu 3555,uestc 1307 windy 数)
    hdu 1072 Nightmare (广搜)
    hdu 1398 Square Coins (母函数)
    hdu 1253 胜利大逃亡 (深搜)
    hdu 1115 Lifting the Stone (求重心)
  • 原文地址:https://www.cnblogs.com/TencentLBS/p/11499085.html
Copyright © 2011-2022 走看看