使用 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 插件吧！要注意的是，目前这一插件还属于测试版，我们欢迎大家来尝鲜和反馈相关意见，未来我们会继续努力将其打造得更加完美，请大家保持关注~

你可能想看更多