MapKit 的新功能

MapKit的最新内容

大家下午好 欢迎来到206号讲座 本次讲座是关于 《MapKit的最新内容》 我是苏米特·隆卡尔 我是在地图团队工作的软件工程师 今天下午的讲座内容很多 那我们闲话少说直接开始

开始之前 我们先来看看今天的讲座日程 今天第一个话题是 现有MapKit API的功能改进 这里我主要介绍新功能 不好意思 我主要探讨 我们新增的API功能 以支持现有的功能 之后 我会谈谈Transit 我们主要关注MapKit中 的Transit问题 最后是Flyover Flyover是 MapKit中的全新Map Type iOS 6起 可以运用在iOS的应用中 现在我们就展示给大家看 关于这个话题 我们还准备了许多演示 这样大家可以看到所有这些新 增API是怎样工作的 大致是这些 接下来我们直接 介绍今天首个话题 现有API的改进

根据诸位开发人员的提议和要求 今年我们下大力气 确保大家和你们的应用能够充 分利用MapKit的功能 这些新增的API可以使你在 应用中自定义MapKit 同样可以改善用户体验 对于像诸位这样的开发人员来说 这意味着诸位会减少编码量 我们现在来逐个看这些API 先来看看 Pin Color Customization

MapKit图钉也叫 MKAnnotationView 从一开始它们就是 MapKit的重要组成部分 它们可以在地图上 确定任何单个图钉的具体位置 但谈及自定义的时候 我们却没有太多可以修改的 你只能将之设为 红色或绿色或紫色 你没有其他选择 从iOS3起 你只有这三种选择 现在我们来看 可以实现自定义的新款API 我们把它设定为 MKPinAnnotationView 的属性 叫做pinTintColor 在iOS上 叫做UIColor 在OS X上 是NSColor 之后我們也称其为 UIColor和NSColor 这意味着在地图上你有 数百万不同颜色可以选择

我希望借此机会指出旧版API 即图钉颜色设置的不足之处 因此如果你的应用软件 还在用这款API 一定要升级到 我们正在介绍的最新版API 这就是关于 图钉颜色自定义的内容 接下来是 Callout自定义 在详细介绍 callouts前 先来说说什么是 callout 对于已经使用这个功能 很久的朋友来说 就当是温故而知新吧 那什么是callout呢 callout就是点击注释 时 跳出来的那个白色气泡 主要由四部分构成 其一是标题 其二 紧接在标题下面的副标题 然后是右辅助视图和左辅助视图 通常情况下这四部分足以 向我们展示和提供该点 和它们所代表的座标的信息 但是当内容数量增加时就会出现问题 例如 在这个callout中 你可以看到副标题就附在这点上 那么怎么才能自定义callout 来满足应用需求呢 事实证明 这也是研发人员一 直以来试图解决的问题

有时遇到这样的问题 在地图软件中点击那个点后 会跳出类似这样的东西 点击注释时你会得到一个POI 和带有Yelp点评 功能的callout 为了实现类似的行为 我们见过开发人员做过这样的事情 他们把Emojis放入副标题中 我是说 这种办法 对这类情况还是可以的 可是当处理更复杂的情况 比如像这种情况又会怎样呢？ 结果发现这不是个好的办法 为了解决这个问题 我们来介绍一个新的办法 它可以帮你自定义callout 我们这里介绍的属性叫做 detailCalloutAccessoryView 在iOS上 会用到UIView 在OS X上 则是NSView 那么这是个UIView和NSView 这意谓着可以更大限度地实现自定义 那么即便想使用也可以这么做 这会开启无数 自定义callout的可能 同时这些callout都 支持从右到左的语言自动排版 也就是说所有的功能已准备好 只需你输入一行代码即可 我们来快速看看示例代码 以及怎么在应用中使用 这里我有一个回调函数 当你点击注释时就会执行该函数 先来设置 detailCalloutAccessory属性 detailCalloutAccessoryView 属性 作为UIImageView 大家来看 我放了一个泰姬陵 的图片在callout中 这些就是自定义 callout所要做的 怎么样 很棒吧？

正如我刚才所说的这只是 UIView和NSView 我们非常高兴 能为大家提供这个功能 来看看你们能用它做些什么 希望我们很快就能看到结果 这就是关于Callout 自定义的所有内容 我们来继续讲地图自定义

在这个特定的话题中 我们将介绍新版API 它可以帮助大家控制 在Map View上进行的内容 比如在你所有的应用程序中 有个地图程序 怎样才能控制 Map View的内容呢？ 如今这些API在地图程序中 已经使用了好多年 现在我们就给大家看看 首先来看交通状况 现在你可以在Map View中 显示任何交通高峰 你只需要在 Map View上插面小旗 这个叫做 shows Traffic 与交通状况功能相似的 我们还要介绍 显示或隐藏比例尺的方法 你可以在Map View 左上角显示或隐藏比例尺 同样的 你还可以显示或隐藏指南针

你可能注意到了这些API与 现有的API很相似 比如showsPointsOfInterest 或showsBuilding 我们相信通过使用这些API 你可以在自己的应用中 自定义Map View 并获得实现棒的用户体验 这就是地图自定义

除了地图和这些谈过的API外 我们对MapKit也有很多改进 首先是时区支持 我们在MK地图项增添了时区属性 使用这个属性可以获得相关的时区 可以和CLGeocoder一起使用 因此你可以用一个特定的坐标 找到相关的时区 你也可以和MK本地搜索一起使用 这样就可以搜索感兴趣的区域 或任何你想查找的内容 还可以找到相关时区 此外 我们还对MapKit做了诸多改进 以实现更好的Swift兼容性 同时我们还增加了 WatchKit支持 从而可以在手表上 启动你自己的地图程序 这些就是我们对MapKit 做的所有改进 我们来继续讲下一个话题 同时这也是我个人最喜欢的话题 Transit

昨天的讲座很令人兴奋 同时我们也推出了地图程序 的新功能 Transit 今天我们主要介绍这对于 MapKit而言意味什么 在这个功能方面 我们已经做了许多工作 在设计该功能时 我们将用户放在开发过程的中心位置 为了在你的应用程序中提供类似的体验 我们希望同过地图软件给你 提供相似的体验 和你... 我们采用MapsTransit的 入口来实现这一点 我们来逐个看这个入口 首先 可以应用Transit ETA 如果你之前使用过 MKDirections协议 MKDirection类型 和相关的API的话 那么你也许知道我们支持汽车和步行 这两种交通方式 你可以针对这两种交通类型 提出方向和ETA请求 今年我们添加了新的交通方式 MKDirectionsTransportType 和Transit 有这个TransportType 就可以应用ETA 我要指出的是 你将只为Transit应用ETAs 你不会获得Transit方向 我们进入示例代码之前 来看一下可以怎样 从ETA之外获得什么 比如你可以获得预计到达时间 和预计离开时间 考虑到交通频率的性质 大多数都取决于时间和地点 因此提供这一信息就变得非常重要 我们相信通过这些信息 你会为程序用户群提供很棒的用户体验 我们来看示例代码 怎样才能应用 这些Transit ETA 这里我有个辅助函数 getTransitETA 那我先 生成MKDirectionsRequest 之后我将设置起点和目的地 一旦完成 我将交通类型设置为Transit 因为我们感兴趣的是 获得Transit ETA 使用刚刚生成的函数 我将要创建 MKDirections对象 我叫它ETA计算程序 随着Completion Handler确定终点 同时在CompletionHandler上 我将处理 从服务器反馈回来的信息 这就是Transit ̨ETA 现在既然我们 具备了Transit ETA 那为了提供完整的体验 我们会介绍一种方法 来启动地图软件 进入Transit模式 到目前为止你可以在地图软件上 通过不同的启动方式 甚至其他相关的软件来启动运行 此外MKLaunchOptions DirectionsModeKey 将给你指出哪些地图软件模式可以使用 现在我们支持Driving方式 和步行方式 在iOS 9中我们 还引入Transit模式 通过这个模式 你可以从你的程序中启动地图应用 我们快速来看这里的示例代码 那么我这里有个辅助公式 openInMapsTransit 这是一个使用坐标的公式

我基本上先要用那个解析坐标 生成MK地图项 之后我会用Transit模式设置 生成字典启动选项 一旦完成 我只需在地图程序上使用 openInMapsWithLaunchOptions 基本上这是在Transit 模式上启动地图程序 并且是以在地图上 设置的内容作为目的地 这部分内容就是这些了 让我们来看看这些API是怎么运行的

好的 为了这次演示 我创建了一个 旧金山城市的旅游应用程序 基本上只是个加上了 一些注释的简单地图视图 我来快速运行一下 你们可以看到现在我有什么

正如大家所见 我们有张旧金山的地图 我用地标做了几个不同注释 比如这里是苏特洛讯号塔 这里是金门大桥还有所有这些 我还随意设置了这些图钉的颜色 所以如果我向下滚动到...

viewForAnnotation callback 你们可以看到我设置了 图钉颜色属性 来自定义这些图钉颜色 好了 随着演示的进行 我们要尝试更多的自定义 接下来 我要在副标题 加上Transit ETA 为了实现这个内容 我创建了个简单的辅助公式

我把它拖拽到这里 这样就有了个可以简单处理 当地地标注释的辅助公式 然后我要这个位子生成 MKDirectionsRequest 大家可以看到我已经生成了 一个MKDirectionsRequest 之后我在只需在应用中 设置个起点和目的地 最后我把交通类型 设置为Transit 因为我们感兴趣的是 Transit ETA 一旦具备这些 我将继续 生成MKDirection对象

在这个位置我用该应用创建了 MKDirection对象

在CompletionHandler中 我将副标题的注释设置为我们 预计的到达时间

在地图视图上加注释前 我将快速地调试这个功能 我们称这个功能为 LandMarkPin

好的 我们来运行一下

好了 从Moscone West 会议中心到市政厅 坐公共交通工具大约要22分钟 我们在看看其他图钉 到轮渡大厦 是17分钟 非常好 这能通过使用Transit 给用户提供一些类似需要多 少时间到达目的地的初步信息 但是为了提供 完整的Transit体验 我们还要想办法 将它们运用在地图程序中 为了实现这次演示的目的 我要将rightcallout Accessoryview 放在我的callout中 同时当我点击时 可以用户直接转换到地图程序

我们快速结束这块内容并回过 头继续callback模式

我将在我的 AnnotationView 设置rightCalloutAccessoryView

这是我之前添加的 rightCalloutAccessoryView 让我们试一下

好了 你可以看到rightCallout AccessoryView 这里已经添加了公交车图标 但没出现任何数据 因为我们还没有点击 callback模式 这套公式每次操作都需要 callout的辅助控制 我们快速把这些内容 添加在这里

这个就是已经执行了的 每次操作都需要 callout辅助控制的 callback模式 我一旦这样 就会加入代码 在地图应用中启动 给定的地图项 这里我先来 用模式Key生成字典对象 模式键设成Transit 然后 从以往的设置 获取坐标 我准备生成MKMapItem 一旦完成 我就会在地图项中打开启动选项 把这个地图项 变为Transit模式 我们快点继续 再次运行应用

好了

来看轮渡大厦

点击这里 地图应用 进入了Transit模式 可以看到需要 乘坐18分钟的40路公交 再回到示例app 试试其他的内容 来看苏特洛讯号塔的结果 好了 这就是获得的结果

根据Transti的结果 需要45分钟 相当远 哦 明白了 出了点问题 公交站移位了 也许就是需要那么久的原因 无论怎样 这就是在MapKit中的 Transit体验

我想谈谈怎样实现刚说过的 自定义callout 我们继续来看 怎样在示例app中 应用这些callout

好了 首先 我们来谈谈 callback模式 每次点击注释就会得到调用 在这里 我会在视图上 设置具体的回调辅助属性 为路标所准备的数据中 我有部分图像 在Callout高级设置中 设置UIImageView 来看在注释中是什么样子 在这里 读出图像数据 从解析的plist文件中 读出图像名称 接着生成UIImage 然后生成 UIImageView 在detailCallout AccessoryView中设置 我们就来运行这个

好了 很好 我现在有了 金门大桥的图像 我们继续来看 就这样 这是非常漂亮的 金门大桥图像 来看看还有什么

还有轮渡大厦的图像

这就是目前的位置

很好 没有泛美金字塔图像 从这里可知 当我们设置 具体的回调辅助视图 我们总能获得优先级 或副标题 对金门大桥而言 我们添加了细节 因而我们也有了副标题 但是一旦设置detailCall outAccessoryView 它就会获得优先级或副标题 对于部分其他地标 我现在没有图像 我们可以在这里加上文本

我已经生成了文本视图 那么我这里有自定义文本视图 基本上我刚设置过高和宽 这样可以通过具体的回调

辅助视图显示内容 与图像类似 我可以从 归档这些地标建筑的 plist文件中读出数据 我把这些 detailTextView 设置成 detailCalloutAccessoryView 好 我再快速地来运行一次

好了 很好 我们来看一下 正如大家所见在苏特洛讯号塔 下面有不错的文本视图 我们再来看看其他内容 市政厅也是一样 文本也不错

这里我希望回调副标题 回调UIImageView 再回调TextView

这就是这个API的 所有出彩的地方 我们非常高兴为大家介绍它 并且坚信各位 能实现出色的应用

那么从这个演示中学到的是 如何来自定义这些图钉颜色 我们学到如何自定义回调 也学到如何应用 Transit ETA 以及如何将用户带到地图应用 以便提供丰富的交通体验 我这边就是要介绍这些 再来看Flyover 有请伊丽莎白

好的

我们来谈谈Flyover 我是伊丽莎白·林奎斯特 也是在地图团队工作的工程师 今天我给大家介绍这些内容

首先 Flyover是什么？

怎样在应用中发挥作用？

在使用Flyover时 怎么设置正确的区域 并处理摄像头？

我还会介绍Flyover与现有部分 MapKit API怎样配合

首先Flyover具体 是指什么？ 例如说这是Flyover

这里是各种城市和地标的 高度真实3D模型 在世界各地哪儿都有 这样的东西

自从iOS 6起 在地图应用中都可以找到 我们现在为大家提供机会 为用户展示这些互动3D视图

大家可能注意到 在地图应用中并没有卫星图像 有的是位于代表地面的

3D立体图上方的平面卫星图 在你们的app中也是这种情况

Flyover的另一个重要特点是: 它是在球体上展示 而不是像其他2D地图类型那样展示 这就意味着要如何处理区域设置 这部分内容我稍后会介绍

那么在应用中怎样才能获得 Flyover视图呢？

如果以前用过MapKit 那么一定会熟悉MK地图类型 这是在MK地图视图上设置的属性 是为了选择将要显示的数据类型 我们有普通地图的标准

还有卫星地图 是从上到下的卫星视图

还有在卫星视图中加入了道路 标签和兴趣点的混合地图

我们现在为大家 介绍两种新的地图类型 Satellite Flyover 和Hybrid Flyover 为了在app中显示这类内容 只需将地图视图中的地图类型 设置为 Satellite Flyover即可

如果想添加诸如标签 兴趣点 道路和国界等内容 可以使用Hybrid Flyover地图类型

我说过在使用Flyover时 有些内容需要考虑 其中重要的一项是 怎样设置地图的可见区域

大家可能对使用矩形的几种 MapKit方法比较熟悉 如MKCoordinateRegion 和MKMapRect 以便设置和获得地图的可见区域 不过地图视图的可见区域 并非总是矩形 在iOS 7中 我们介绍可以查看 有斜度的地图视图 这样可以从一定角度查看地图 当你这么做时

可见区域就不会是完全的矩形 在Flyover中就是这种情况 这样也可以 看到倾斜的地图视图

现在将这个区域缩小来看 这样就可以看到 可见区域的实际形状 我们在这里需要做的是 定义地图的可见区域为矩形 这就包括我们在屏幕上 实际看到的内容 就是本例中的蓝色矩形

在Flyover中 就是这么做 可见区域都定义为矩形 也就是在屏幕上所包括的区域

在Flyover中 视图不必为了不是矩形而倾斜 如果有一片区域是这样 而且还相当大 在本例中 可以试着把可见区域设置成蓝色矩形 最后就会是这样

这里的点就是 矩形显示将一直成为近似值 因为Flyover是出现在球体上

同样如果面积很大的区域 有部分区域实际上不会显示 在这种情况下 部分可见区域实际是球体后面

即便这是个别情况 矩形区域设置在 Flyover中依然奏效 在倾斜地图视图中 如果是从上到下的视图需要放大很多 建议要确保你是通过 MKMapCamera 在展示这个世界的相应部分

MKMapCamera早在2013年的 iOS 7中就已推出 想了解MKMapCamera的 更多详情 以及普遍的地区设置问题 我推荐大家看看 《将MapKit放入透视图》 这是2013年的讲座内容

但是我要简要介绍 MKMapCamera的功能

它有四个基本属性

中间坐标代表想在屏幕中间 显示的世界上的位置

朝向是摄像头所朝的方向

斜度是你看地图视角的倾斜程度 还有高度是你希望摄像头所处位置 在地图上方的高度是以米为单位

还有一个便捷的 MKMapCamera初始化器 这会令中心坐标和你希望摄像头 所在位置的视点坐标 你所希望摄像头处的高度 这样就可以获得从视点坐标 看到中心坐标的摄像头位置

不过 在Flyover中 有地面 建筑 和各种有趣的内容 这就意味着高度 实际上并不像 你想象中的那么简单

例如 这是在建筑上方的高度么？ 这是地面上的高度么？ 还是海平面高度？ 这并非是中心坐标和 摄像头之间的距离 摄像头实际上在这种情况下 更容易测量 我们就在这里添加了 MKMapCamera的新初始化器 我们来快速了解一下这是怎么实现的

先从中心坐标开始 也就是你希望在屏幕中间的位置 接着确定一个距离以米为单位 你希望中心坐标和摄像头所在 位置之间的距离 注意这与海拔高度不同

还要确定斜度 也就是希望摄像头所处的角度 还有朝向准备看的方向

通过这个初始化器 你可以完全不必担心在摄像头下方的 地面或建筑会发生什么情况

我先放一段短的演示 来看可以用Flyover 完成哪些很酷的事情

好的 苏米特刚刚给大家看了旅游应用 我的Mac上也有类似应用 可以看到这里的地标

例如悬崖小屋 大家可能还记得有些位置 我们还没有真实的图像 那我觉得可以 用Flyover进行补足

我想做的是 在我的callouts中添加 detailCallout AccessoryView 我将使用MKMap 以便为Flyover 为设置成detailCallout AccessoryView的图像

MKMap快照非常有用 当你只需要地图的静态图像时 当你不要与它互动时都是如此

我还会为这个快照加上几个选项 最重要的是要把mapType 设置成 Satellite Flyover

我会使用新的初始化器 生成MKMapCamera 来看注释部分的坐标

我接着使用这些选项 生成MKMap快照器

启动快照器如果也已完成且没有错误 我就在detailCallout AccessoryView生成图像

我们当然要调用这个功能

好的 我们来看效果如何

如果我没记错悬崖小屋是我们 还没有图像的那个 来看 现在有了

好的 我们应该还有另外几处 例如市政厅 相当酷 不过 Flyover视图 当时是可以互动的 我觉得可以在视图中添加一点动画效果 我生成一个新的 ViewController 这个还太常用 不过其中有MKMapView

我会在其中添加部分有用的常数 然后我来设置地图视图

大家还注意到我给Satellite Flyover 设置了地图类型 还把OS X中可见的指南针 和缩放控制进行隐藏

我还生成了 MKMapCamera 初始状态是地标的坐标

我需要的设置就是这些

接着我准备再生成几个 MKMapCamera

首先 是一个稍稍向下倾斜的斜度摄像头 这里还加上了旋转 这样可以稍作旋转 因为MKMapCamera 在MKMapView具有动画属性 我会做些动画处理 以便在这两个之间进行切换

这里我先添加一段短的动画效果 把摄像头设置成斜度摄像头 再把视图向下倾斜一点 再加稍长的动画内容 也会做少许旋转动作

在主ViewController中 我加入了rightCallout AccessoryView 这可以打开 新的View Controller

我们再加上按钮

好的 我们再来看悬崖小屋 就像这样 这里有个小按钮可以稍稍倾斜

再做旋转

这个非常有趣 我们也来看看这个 因为我觉得非常酷

就这样 泛美金字塔也好了

好的现在我们看到了 Flyover的部分功能 那我们回到讲座中来 一开始时我就说过 我想说说 现有MapKit API的 部分功能 看看它们怎么和 Flyover怎么配合

我先从MK注释讲起 MK注释用于注释地图的单一坐标 最常见的情况 是我们今天使用的图钉

如果是用标准地图类型显示建筑

注释就是位于最上面的部分 在使用Flyover时 地图类型时就是这种情况 当使用Flyover时 无论发现什么 注释将出现在任何建筑 树木 大船 雕塑的上方

接下来是MKOverlay 叠加图层是用于强调地图的区域 而不是单一的坐标 如果是在标准地图类型的3D地图中

你会注意到建筑阻隔了叠加图层 Flyover也是同样如此 Flyover的建筑和树木 会阻隔任何叠加层 就像是这样

不过叠加层会拉到地面的上方 这样就会跟着地势走

就像是这样

我觉得为了在app中 用到Flyover 大家需要掌握的就是这些 我真是迫不及待 想看看大家的成果

总结一下今天所讲的内容 我们对自定义图钉 callouts 和显示带有交通状况 指南针 和比例尺的地图增加了几种新方法

还增添了Transit ETA请求 以及启动地图app中的显示 Transit方向的功能 我们还增加了Satellite Flyover 和Hybrid Flyover地图类型 这样可以在app中高度真实地显示 地面的3D模型和卫星图像

若想了解更多详情可以看今天 MapKit文件资料 和开发人员论坛

感谢大家光临