MapBox Flutter

本存储库包含对应 YouTube 视频的代码 – https://youtu.be/ashk0mYLx9c
如果您喜欢这项工作，可以通过点赞和分享视频来支持我，并给这个存储库点星！?

? 那么这个应用是做什么的呢？

MapBox Flutter 演示了如何在 Flutter 应用中实现 MapBox 及其地图和导航 SDK。我们将通过构建一个涉及饥饿的您骑自行车以及一系列餐馆和咖啡馆的简单项目来实现这一目标！?

??‍? 应用的设置和运行说明在哪里？

打开您的浏览器和 IDE，我们还有一些事情要做！跟随我们一起设置并运行应用。

  1. 前往 https://account.mapbox.com 并创建一个新帐户。然后访问您的帐户页面。您将看到一个公共访问令牌。这是我们稍后需要的东西。

Screenshot 2022-02-11 at 9 03 04 PM

  1. 在同一页面上，点击“创建令牌”，然后在下一页添加一个新的 secret token。确保在此处选中“DOWNLOADS:READ”权限。创建令牌后，您必须将其复制到其他地方，因为您只能看到一次。

Screenshot 2022-02-11 at 9 04 50 PM

  1. 现在您拥有了两个令牌，只需要在项目代码的相应位置替换它们。打开 `starter_code/mapbox_navigation` 文件夹，并在整个项目中查找 `YOUR_PUBLIC_ACCESS_TOKEN` 和 `YOUR_SECRET_TOKEN`。分别用从步骤 1 和 2 获得的令牌替换它们。为了双重检查，您可以确保：
    • 对于 ios：您必须将公共令牌放在 `Runner/Info.plist` 文件中。
    • 某些 android：您必须将公共令牌作为字符串放入 `app/src/main/res/values/strings.xml` 中，并将 secret token 作为字符串放入 `gradle.properties` 文件中。
  2. 要在 iOS 设备/模拟器中运行该应用，您还需要一个额外的步骤。在您的主目录中打开或创建一个 `.netrc` 文件。在其中添加以下行：

machine api.mapbox.com
  login mapbox
  password <YOUR_SECRET_TOKEN>
  1. 最后，打开您的 `assets` 文件夹并添加一个 `config/.env` 文件。您可以在其中添加一个键值对：
MAPBOX_ACCESS_TOKEN="<YOUR_PUBLIC_ACCESS_TOKEN>"

就是这样。您遵循这 5 个步骤，一切都会顺利进行。现在，我也建议您仔细阅读 Android 和 iOS 的文档，因为其中还有更多内容，例如添加权限等，这些我都已为您完成。

GitHub

查看 Github