使用Google Maps样式向导自定义MapKit的MKMapView

定制MKMapView外观并不是那么容易。 在这里，我将告诉您如何使用代码示例完全自定义它。

上周，我一直在尝试自定义MKMapView，但这是不可能的。 如果您使用MapKit已有一段时间，您可能会知道，当需要叠加层和折线时，它很棒，并且它具有许多有用且非常有趣的功能。 但是事实是它不是非常可定制的。

我需要使地图看起来与使用Google Maps构建的Uber相似，并且我不想更改为Google Maps，因为我有很多事情是使用MapKit完成的。 深度重构并不是一个好的选择。 经过大量搜索和阅读StackOverflow线程后，我提供了一个解决方案。

瓷砖覆盖

如果您以前从未听说过瓷砖叠加层，可以告诉您它们可以完全自定义您的地图。 该机制很简单，每当地图需要显示“平铺”（瓷砖上的一小块区域）时，它都会向服务器请求该图块的图像。 称为“平铺服务器”的服务器将返回图块图像，并将其显示在地图上。 简单。 这是一些免费的磁贴服务器的列表。

在iOS中，可以使用MKTileOverlay完成此操作。 磁贴叠加层需要一个URL。 该URL遵循以下架构：

https://somecoolserver.com/path?x= {x} ＆y = {y} ＆z = {z}

看到那些参数了吗？ {x}，{y}和{z}？ {x}和{y}参数将由地图视图使用其所请求的图块的坐标填充，而{z}将由缩放级别填充。

Google样式向导

Google的Google Map Styling Wizard做得非常出色。 我必须认识它。 它具有简单的界面，功能绝对强大。 使用此向导，您可以创建可从Google Maps SDK导入的配置JSON，或者获取可显示静态地图（图像）的URL。

但是在这一点上，我面临着一个大问题。 好的，这很好，我可以根据需要自定义地图，但是如何将其导入到MKMapView中呢？

我以为我必须将该JSON文件转换为图块叠加服务器URL架构。

该解决方案随StackOverflow一起提供。 请参阅此http://stackoverflow.com/questions/29692737/customizing-google-map-tile-server-url。

该线程的末尾是用javascript编写的简短脚本。 所以我首先要做的就是将该函数复制到一个js文件中，并使用node.js执行它。 有效！ 但这不是很方便。 想象另一个开发人员必须做同样的事情。 每当他想对地图进行任何更改时，他都将需要执行该node.js脚本。

最终的解决方案

最后，我翻译了该脚本以进行快速处理，并将其作为cocoapod上传。 该吊舱称为MapKitGoogleStyler，您可以在以下位置找到它：https：//github.com/fmo91/MapKitGoogleStyler。

将其嵌入到项目中具有一些优势，例如将json保存在直接在项目中的文件中。 每当您更改json文件时，地图外观都会更改。 简直就是魔术。

另一个选择是将地图配置JSON托管在后端中。 启动应用程序时，您需要将该JSON请求到您的后端或从缓存中恢复它，并配置了地图。 这称为后端驱动的UI。

代码示例

您要做的第一件事是使用Google地图样式向导创建JSON。 如果您正在尝试并希望进行简单的演示，则可以使用以下示例JSON：https://gist.github.com/fmo91/b5e539fd3d276bde3ada10719b912b1e

将JSON包含到您的项目中，并将其命名为overlay.json。

其次，在您的Podfile中包含以下行：

  pod“ MapKitGoogleStyler” 

然后，在您的ViewController或您拥有地图的任何地方，包括以下框架：

 导入MapKitGoogleStyler 

并将叠加层添加到您的地图中：

最后，不要忘记将其添加到您的MKMapViewDelegate中：

这是完整的swift文件：

希望这对您有很大帮助！