mapbox 导航_初学有点懵? Mapbox 游乐场为你开放!#GoGlobal

c6d0baf8b950112c5968e2c496dc33d0.png
欢迎来到 #GoGlobal 系列活动,我们将会在 3 月 - 5 月期间,在 Mapbox 微信公众号,为您带来干货满满的 Mapbox 产品、技术和服务剖析,感谢您的关注!

无论您是新手,还是已经在用 Mapbox GL JS,或者你对常见的地图概念如何跨平台实现感到好奇,不如去探索我们的f="https://docs.mapbox.com/playground/">交互式工具 Playground 游乐场 吧。

点击这里进入 Playground 游乐场:

Playground​docs.mapbox.com
0953c05747e6e2585a3d149f07a18d28.png

这些 "游乐场" 是为实践学习而设计的。选择你的用例并自定义输出,然后会生成特定平台的代码,这样你就可以更快地发布你的地图创意啦。

这里包含 APIs 和 Tools 两大部分,包含以下 8 个,可以点击标题进入“把玩一番”

API

  • 路径规划专用 Directions API :
    支持四种不同的 Mapbox 路径规划方式(mapbox/driving-traffic, mapbox/driving, mapbox/walking,和 mapbox/cycling),来实现导航功能。

cc96fbf334be5b17772bcbb1eec00092.png
  • 朋友约会专用 Isochrone API :
    这是在考虑了交通方式等条件后,请求多边形或线条特征,显示在指定时间内从一个位置可以到达的区域。即绘制等时圈。详情可以查看时空分析必备!一文了解 Mapbox 等时圈 API。

6ad1f14e9c62b98f58ec5eac8358e187.png
  • 设计师专用 Static Images API :
    使用 Mapbox Static Images API 生成地图的图像。指定地图样式、坐标、缩放级别、图像大小等。如何创建一条渐变路径 | Static Image API

97cebdfeae3a775673a4e86aa4cd8915.png
  • 检索高程信息 Tilequery API:
    有了给定的经纬度,我们可以使用 Mapbox Tilequery API 从矢量瓦片中检索特征,比如高程信息,可以参考 Keep App 的使用方法:Tilequery API 使用指南 | 附 Keep 等详细案例

231973dc5c9a7ba4d34a9368e3fec395.png

工具

  • Mapbox GL JS 的计费单位是怎么计算的
    可以在这里开始你与 Mapbox GL JS 的第一次约会!这里帮助你详细了解计费单位之间的关系,包括 Map Load、Map View 和 Vector Tile API requests。

6786828eac1bc0fde29ca8d2b5ab02d2.png
  • Mapbox 离线瓦片数估计器
    再无限制!Mapbox.com 移动端离线地图开放给所有开发者使用,可是你知道如何估算离线的瓦片数么?这个工具帮您估算使用 Mapbox 地图 SDK for Android 和 iOS 版的 Mapbox 地图 SDK 下载一个离线区域所需的瓦片数量。

f5cc10ccc9b557d85e2e3638a3cb494e.png
  • 在地图上添加标记
    这个工具教您如何一步一步在地图上添加一个标记,并查看平台特定代码,在自己的 iOS、Android 或 Web 应用中重新创建此地图。

a7b51a0d3688359cf979cf9ea285ea32.png
  • 在地图上实现搜索
    测试正向和反向地理编码结果,您可以修改很多参数,很有意思哦。

c13d1bca0564ff4dab2af40fd77b6c18.png

交互式工具是 http://mapbox.com/help 的一个新的部分,我们将以 Static Images API 和标记作为例子,具体展开来,让大家体验下。

在地图上添加标记

标记(Marker)是你可以用来标注地图和指定兴趣点的自定义图像。

在 “标记游乐场” 中,你可以选择你的平台 —— web、Android、iOS、React Native 中的任意一个。添加一个标记图像,并生成起始代码,然后直接丢入你的应用程序中。不到两分钟,你就会有一个工作原型。

你说你只是在测试状态?不用担心,我们还可以链接到 JSBin(一个在线网站代码调试平台)。

Static Images API

有时你需要生成一个静态地图,作为一个缩略图或嵌入元素,显示有用的信息,但不需要交互式的静态地图。

进入 Static Images API 游乐场,我们将教你如何创建一个请求到 Mapbox 的 Static Images API。可以直接查看这个案例:

教程 | 三步教你用Static API 制作世界上独一无二的地图壁纸​mp.weixin.qq.com
015d99c3268d68f0dba47a39b5f4e898.png

当然还有很多方法可以扩展这个功能,比如为骑行据添加自定义覆盖,或者在推送通知中包含地图。

查看更多教程:

如何创建一条渐变路径 | Static Image API​mp.weixin.qq.com
33e62ce33ff9f5f4090df40041ee42be.png

想了解更多吗?

这些游乐场对你的项目有用吗?在评论区留言吧!告诉我们你正在创建的项目以及你还想看到哪些游乐场的教程。

如果你想获得更多关于地图的内容教程,欢迎添加 Max(Mapbox_max) 加入开发者群。


欢迎您进入 http://Mapbox.cn 留下你的问题、建议、产品想法等,我们会在 1- 3 个工作日内回复你哦!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值