MapKit JS入门

苹果在WWDC 2018上宣布了MapKit JS，使开发人员能够在浏览器中显示Apple地图。 这意味着您可以将与您在iOS设备上熟悉的丰富程度和交互性相提并论的浏览器。 在这篇文章中，我将解释如何开始使用MapKit JS以及如何在Web应用程序中显示Apple地图。

获取MapKit JS密钥

在开始实施应用程序之前，您需要请求并获取MapKit JS密钥。 这可以在Apple Developer Portal上完成。 单击“ 证书，标识符和配置文件 ”，然后选择地图ID，如以下屏幕截图所示：

使用右上角的添加按钮创建一个新的地图ID，如下所示：

创建地图ID后，下一步就是为该地图ID生成密钥。 如下面的屏幕截图所示，这是在键页面上完成的：

为您的地图ID创建一个密钥，然后下载密钥。 请勿松开钥匙，否则将无法找回钥匙。 再次不要松开钥匙。

注册MapKit JS密钥就差不多了。 在下一节中，我将介绍如何开始在网页上显示地图。

实施节点服务器

Apple提供了两种在网页上显示地图的方式。 我们将研究推荐的方法，该方法还包括在我们的服务器上生成令牌，该令牌随后由Apple进行验证。

如果您对自己生成令牌不感兴趣，那么可以使用这个令人惊叹的网站MapKit JS Helper，只要您输入所有必要的详细信息，它将为您生成令牌。

令牌由标头和有效负载结构组成，如下所示：

您还可以在此处阅读有关规格的更多信息。 如前所述，要使其正常工作，我们将需要实现和配置服务器。

我们的第一个任务是创建一个端点，该端点将向我们返回所需的令牌。 下面的代码在“ / services / jwt ”处创建一个端点，该端点负责创建令牌。 确保从Apple Developer网站下载的私钥是节点项目的一部分。 我们将需要该密钥来对令牌进行签名，如下面的实现所示。 为了对令牌进行签名，我们使用了NPM包“ jsonwebtoken”。 令牌签名后，我们将其作为JSON响应的一部分返回。

甜！ 下一步是使用令牌来验证我们对MapKit JS的请求。

显示地图

Apple提供了一些示例，可用于显示和自定义地图的外观。 我们将显示地图，并在地图上添加注释以指向特定的兴趣点。 这是完整的HTML和JavaScript代码。

下载代码

希望您喜欢这篇文章！ 如果您有兴趣了解有关MapKit开发的更多信息，请查看我受欢迎的Udemy课程“ Mastering MapKit for iOS ”。 非常感谢您的支持。

资源资源

• MapKit JS官方文档
• MapKit JS上的Ruben Gommers文章