Flutter Mapbox GL Native

请注意，此项目仍处于实验阶段，不受官方支持。我们欢迎反馈和贡献。

此 Flutter 插件 for mapbox-gl-native 可以在 Flutter 小部件中嵌入可交互且可自定义的矢量地图。该项目插件尚处于早期开发阶段。目前仅支持 Android。

Flutter-Mapbox-GL-Native

入门

Android

以下示例使用 Mapbox 矢量图块，这需要 Mapbox 帐户和 Mapbox 访问令牌。在您的 Mapbox 帐户页面上获取免费访问令牌。获取密钥后，将其放在项目 Android 目录中

  • 创建一个 local.properties 文件，路径如下：$project_dir/android/local.properties
  • 将 mapbox.accessToken="YOUR MAPBOX ACCESS TOKEN" 添加到 local.properties 文件中。
    添加到 local.properties 文件中。

演示应用

  • 安装 Flutter 并使用 flutter doctor 验证安装
  • 使用 git clone [email protected]:mapbox/flutter-mapbox-gl.git 克隆此仓库
  • 使用 cd flutter_mapbox/example && flutter run 运行应用

新项目

  • 在您的 IDE 或通过终端创建新的 Flutter 项目
  • 将 mapbox_gl: ^0.0.1 依赖项添加到 pubspec.yaml 文件中，并获取包
  • 在 Android 模块 build.gradle 文件中添加 Mapbox 依赖项并读取令牌值
android {
    defaultConfig {
        // ...
        def mapboxAccessToken = localProperties.getProperty('mapbox.accessToken')
        buildConfigField "String", "MAPBOX_ACCESS_TOKEN", "$mapboxAccessToken"
    }
}

dependencies {
    // ...
    implementation "com.mapbox.mapboxsdk:mapbox-android-sdk:6.1.0-SNAPSHOT"
}
  • 在 Android MainActivity 类中初始化 Mapbox
override fun onCreate(savedInstanceState: Bundle?) {
  // ...
  Mapbox.getInstance(this, BuildConfig.MAPBOX_ACCESS_TOKEN)
}
  • 导入 Mapbox 小部件并将其添加到您的 widget 树中
import 'package:mapbox_gl/controller.dart';
import 'package:mapbox_gl/flutter_mapbox.dart';
import 'package:mapbox_gl/overlay.dart';

GitHub

https://github.com/mapbox/flutter-mapbox-gl