[Mapbox简介]帐户注册?让我们构建一个示例(iOS)


介绍

大家好,是Mapbox日本(地图框?日本)。您听说过" Mapbox"吗?我知道这个名字,我从未听说过,它如何易于使用?我认为有很多事情,但是这次我开设了一个Qiita帐户以了解Mapbox。我们希望为希望在应用程序开发中添加映射功能并且正在考虑扩展现有产品(例如SDK教程和相关工具的介绍以及简单的应用程序开发示例)的每个人提供帮助。

关于Mapbox

Mapbox为地图信息服务提供了开发平台。由首席执行官埃里克·贡德森(Eric Gundersen)于2010年在美国成立。我们为各种平台(例如Web,iOS,Android和Unity)开发并提供开源SDK和API。在2019年11月进入日本后,我们于2020年3月与软银公司成立了合资企业" Mapbox Japan GK",以促进本地化等各种业务发展。

Mapbox可能仍然不如Google Maps和Apple Maps(MapKit)知名,但是在日本,例如Yahoo Maps和PayPay越来越多地采用它。

注释中有一篇介绍我们的文章,所以请看一下。

→Hello World,您好,这是Mapbox。

让我们一次使用Mapbox

Mapbox使用移动版SDK提供了一个示例项目。让我们开始构建一个示例项目,并在模拟器中显示Mapbox地图。

要开始使用,您需要专用的アクセストークン才能使用SDK查看Mapbox地图。请访问Mapbox并注册为会员(最好设置两步验证)。

会员注册,SDK下载,示例构建和执行可以使用全て無料执行(费用结构将在后面说明)。

会员注册

1)访问Mapbox,然后按注册。当出现Create your Mapbox account屏幕时,输入您的用户名,电子邮件和密码,接受Mapbox服务条款和隐私政策,然后按"入门"按钮。

2)将显示Check your email屏幕,确认验证电子邮件已到达您的邮箱。

3)确认邮件Verify your Mapbox email address是从邮箱中的[email protected]到达的,然后单击文本中的链接。

4)输入设置的密码登录。

5)如果成功登录,将显示Dashboard页面。

检查访问令牌

完成会员注册后访问帐户页面时,可以看到以pk.开头的字符串。这是一个称为Default public token的访问令牌。在记事本中记下该字符串。我们将在稍后描述的示例构建中使用此令牌。

关于访问令牌

Mapbpx可以为每个访问令牌设置和管理每个功能的使用(范围)。默认公共令牌是提供基本浏览功能(如地图浏览和样式切换)的令牌。各种范围无法更改。

另一方面,使用名为Secret Token的访问令牌,可以设置Mapbox提供的每个服务的可用性。通过删除未使用的功能,可以防止意外访问等意外费用。

我将在以后的文章中解释如何创建秘密令牌。

让我们为您的帐户设置两步验证

Mapbox允许您在登录站点时设置二段階認証。让我们使用Google Authenticator或Microsoft Authenticator进行设置。

1)登录并从屏幕右上方选择Settings

2)从左侧菜单中选择Security,然后打开Two-factor authentication开关。

3)将显示QR码,请使用Google Authenticator或Microsoft Authenticator准备身份验证码并将其输入到屏幕上。

让我们构建一个示例(iOS)

提前准备

在撰写本文时,它是在以下环境中执行的。
-MacOS X 10.15.7(19H2)
--Xcode12

项目使用CocoaPods。如果尚未安装,请提前安装。

项目克隆

注册为会员并准备访问令牌后,请从GitHub克隆示例项目。

1
git clone [email protected]:mapbox/ios-sdk-examples.git

安装相关库

运行

pod命令以安装相关的库。
如果出现pod install错误,请添加--repo-update选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ cd ios-sdk-examples

$ pod install --repo-update

Analyzing dependencies
Downloading dependencies
Installing Mapbox-iOS-SDK (6.2.1)
Installing MapboxMobileEvents (0.10.4)
Installing SwiftLint (0.40.3)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `Examples.xcworkspace` for this project from now on.
Pod installation complete! There are 2 dependencies from the Podfile and 3 total pods installed.

项目建立

examples.xcworkspace将在

ios-sdk-examples文件夹中创建,双击以启动Xcode。
打开文件后,选择"示例"方案和任何模拟器。如果按原样按下执行按钮,将发生构建错误,并且以下消息将显示在日志中。
009_xcode_build1-2.png

1
2
error: Missing Mapbox access token
error: Get an access token from <https://www.mapbox.com/studio/account/tokens/>, then create a new file at {プロジェクトのディレクトリ}/ios-sdk-examples/mapbox_access_token that contains the access token.

发生了构建错误,因为无法识别访问令牌。
此错误由ios-sdk-examples/Examples/insert-mapbox-token.sh脚本输出。它在项目的Build PhasesInsert Mapbox Access Token中设置。让我们检查一下它是哪种脚本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
token_file=$SRCROOT/mapbox_access_token

# First check the above path, then the user directory.
# Ignore exit codes from `cat`.
token="$(cat $token_file 2> /dev/null)" || token="$(cat ~/.mapbox 2> /dev/null)"

if [ "$token" ]; then
  plutil -replace MGLMapboxAccessToken -string $token "$TARGET_BUILD_DIR/$INFOPLIST_PATH"
else
  echo 'error: Missing Mapbox access token'
  open 'https://www.mapbox.com/studio/account/tokens/'
  echo "error: Get an access token from <https://www.mapbox.com/studio/account/tokens/>, then create a new file at $token_file that contains the access token."
  exit 1
fi

insert-mapbox-token.sh从项目目录($ SRCROOT)中的文件mapbox_access_token~/.mapbox获取访问令牌,将MGLMapboxAccessToken写入Info.plist中的键,然后保存。可以看到它在做什么。您会看到由于未安装任何文件而发生了错误。

假设多个项目处理单个访问令牌,则这次将采用前者。
创建ios-sdk-examples/mapbox_access_token?粘贴访问令牌,保存并重建。

建立项目#2

这一次,构建成功并且模拟器启动了吗?您应该看到示例。

让我们点击

Getting started组中的Add a marker to a map

我认为地图已安全显示(恭喜!)
尝试用鼠标拖动来滚动,按住选项键的同时捏住或拖动以放大或旋转。

有点慢...

如果尝试使用模拟器移动样品,则操作可能会变慢,并且可能会感到担心(为避免在模拟器上运行样品,这是不可避免的...)。如果您感到压力很大,建议您将应用程序转移到实际设备上。

每个样本的解释性网站

您可以知道通过执行构建的示例可以实现什么,但是每个示例也在以下站点中进行了说明。

https://docs.mapbox.com/ios/maps/examples/

由于屏幕截图已发布,因此尤其可以在向非工程师进行解释时使用。

费用结构

Mapbox定价。每个API最多可以免费使用。如果您使用模拟器或通过合并SDK来检查实际机器,则它将适合在自由框架内(无需注册信用卡)。

https://www.mapbox.jp/pricing

各种链接

Twitter:https://twitter.com/mapbox_jp

注意:https://note.com/mapbox_japan

GitHub:https://github.com/mapbox

SDK文档:https://docs.mapbox.com/ios/maps/overview/

各种查询:https://www.mapbox.jp/contact