使用 Flutter X Mapbox 插件为你的 Android与iOS 应用添加地图组件!

跨平台开发神器 Flutter

一次开发可以同时适配 Android 与 iOS 两种移动端平台?没错,这就是谷歌推出的开源移动端开发工具包 Flutter 的神奇之处!推出短短一年的时间,Flutter 已经在社区中有很好的口碑,更是谷歌力推的下一代物联网系统 Fushia 的主要开发工具。

那么,在 Flutter 上如果想集成地图功能,该怎么做呢?近期 Mapbox 就发布了一款插件,只需很少的代码量就可以在 Flutter 的组件加入入交互式和可定制的地图。你可以使用我们的预设地图风格或者创建自定义的地图样式,通过这一插件将想要的地图功能加入到你的 App 中。

听起来很有趣,一起来看看具体的操作步骤吧!

安装 Flutter 插件

按照https://pub.dartlang.org/packages/mapbox_gl的指引完成基础的 Flutter 安装与配置工作,源代码可以在https://github.com/mapbox/flutter-mapbox-gl这个页面查看。

添加地图

要在 Flutter 组件中添加一个可交互的地图,需要添加一个 MapboxOverlay 子元素。例如,以下片段将添加一个在 target 中以指定的坐标为中心的 Dark 风格的地图:

该地图与其他的 Flutter 组件完美集成。这一实例展现了包含三个选项列表的地图效果:

这一插件同样包括 API 支持,可将用户在移动端屏幕上点击的位置(屏幕的 x, y 坐标)转换为地图上的经纬度。

制作可交互的地图

Mapbox 的 Flutter 插件还提供了一个 Demo App,展示了你可以通过插件实现的地图交互效果,比如:

快速跳转到定位的位置

计算出屏幕上点击位置的经纬度

切换显示不同的地图样式

一次开发,就可以为 Android 与 iOS 的应用添加地图功能,快来试试 Mapbox x Flutter 插件吧!要注意的是,目前这一插件还属于测试版,我们欢迎大家来尝鲜和反馈相关意见,未来我们会继续努力将其打造得更加完美,请大家保持关注~

你可能想看更多

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180710G17M9I00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券