Flutter地图展示插件mapbox_gl的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter地图展示插件mapbox_gl的使用

简介

Flutter Mapbox GL 是一个允许在Flutter应用中嵌入交互式和可定制矢量地图的插件。它通过mapbox-gl-native实现Android和iOS平台的地图集成，对于Web端则依赖于mapbox-gl-js。该项目仅支持这些库公开API的一个子集，并且是非官方的社区驱动项目。

screenshot

设置

安装包

该插件可以通过pub.dev获取。要安装，请运行以下命令：

flutter pub add mapbox_gl

Mobile

秘密的Mapbox访问令牌

为了下载底层的Mapbox SDK，需要一个具有Downloads: Read权限的秘密访问令牌。有关设置方法，请参阅Android或iOS文档。

如果未正确配置令牌，构建过程将失败并显示错误信息（分别为Android/iOS）：

  • Android:

    * What went wrong:
A problem occurred evaluating project ':mapbox_gl'.
> SDK Registry token is null. See README.md for more information.

  • iOS:

    [!] Error installing Mapbox-iOS-SDK
curl: (22) The requested URL returned error: 401 Unauthorized

Web

在你的index.html文件的<head>部分包含JavaScript和CSS文件：

<script src='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />

注意: 查找最新版本请参见Mapbox GL JS 文档。

所有平台

公共的Mapbox访问令牌

必须向MapboxMap小部件提供公共访问令牌以检索样式和资源。虽然可以直接在源文件中硬编码，但最佳实践是从外部来源（如配置文件或环境变量）获取访问令牌。示例应用程序使用以下技术：

  • 在构建时通过命令行参数传递访问令牌：

    flutter build <platform> --dart-define ACCESS_TOKEN=YOUR_TOKEN_HERE

  • 或者运行应用程序时：

    flutter run --dart-define ACCESS_TOKEN=YOUR_TOKEN_HERE

  • 然后在Dart代码中检索：

    MapboxMap(
  ...
  accessToken: const String.fromEnvironment("ACCESS_TOKEN"),
  ...
)

支持的API

功能 Android iOS Web
Style ✅ ✅ ✅
Camera ✅ ✅ ✅
Gesture ✅ ✅ ✅
User Location ✅ ✅ ✅
… … … …

更多详情可以查看官方文档。

示例代码

下面是一个完整的示例demo，展示了如何创建一个基本的地图视图：

import 'package:flutter/material.dart';
import 'package:mapbox_gl/mapbox_gl.dart';

void main() {
  runApp(MaterialApp(home: MapsDemo()));
}

class MapsDemo extends StatefulWidget {
  static const String ACCESS_TOKEN = String.fromEnvironment("ACCESS_TOKEN");

  @override
  _MapsDemoState createState() => _MapsDemoState();
}

class _MapsDemoState extends State<MapsDemo> {
  late MapboxMapController mapController;

  void onMapCreated(MapboxMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Mapbox Maps Example')),
      body: MapsDemo.ACCESS_TOKEN.isEmpty ||
              MapsDemo.ACCESS_TOKEN.contains("YOUR_TOKEN")
          ? buildAccessTokenWarning()
          : MapboxMap(
              accessToken: MapsDemo.ACCESS_TOKEN,
              onMapCreated: onMapCreated,
              initialCameraPosition: CameraPosition(
                target: LatLng(51.5074, -0.1278), // London coordinates
                zoom: 12.0,
              ),
            ),
    );
  }

  Widget buildAccessTokenWarning() {
    return Center(
      child: Text(
        "Please set your access token with --dart-define=ACCESS_TOKEN=YOUR_TOKEN",
        style: TextStyle(fontSize: 16),
      ),
    );
  }
}

此示例展示了如何使用MapboxMap widget初始化一个带有初始相机位置的地图，并确保您已正确设置了访问令牌。如果您没有设置访问令牌，它会显示警告信息提示用户设置正确的访问令牌。

希望这个指南能帮助你开始使用Flutter Mapbox GL插件！如果有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter地图展示插件mapbox_gl的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter地图展示插件mapbox_gl的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用mapbox_gl插件来展示地图的代码示例。这个示例将展示如何设置基本的地图视图，并在地图上添加一个标记。

首先，确保你已经添加了mapbox_gl依赖到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  mapbox_gl: ^0.14.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你需要在AndroidManifest.xml文件中添加Mapbox的访问令牌（请确保你已经从Mapbox官网获取了一个有效的访问令牌）：

<meta-data
    android:name="com.mapbox.mapboxsdk.android.Telemetry#accessToken"
    android:value="YOUR_MAPBOX_ACCESS_TOKEN" />

替换YOUR_MAPBOX_ACCESS_TOKEN为你的实际访问令牌。

以下是一个完整的Flutter应用示例，展示了如何使用mapbox_gl来展示地图：

import 'package:flutter/material.dart';
import 'package:mapbox_gl/mapbox_gl.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mapbox GL Flutter Example'),
        ),
        body: MapboxMap(
          accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',  // 在这里替换为你的访问令牌
          initialCameraPosition: CameraPosition(
            target: LatLng(-34.397, 150.644),
            zoom: 11.0,
          ),
          mapboxMapOptions: MapboxMapOptions(
            styleUrl: MapboxStyles.STREETS,
          ),
          onMapCreated: (MapboxMapController controller) {
            _addMarker(controller);
          },
        ),
      ),
    );
  }

  void _addMarker(MapboxMapController controller) {
    controller.addMarker(
      MarkerOptions()
        ..geometry = LatLng(-34.397, 150.644)
        ..icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE),
    );
  }
}

在这个示例中：

  1. 我们创建了一个基本的Flutter应用，包含一个MaterialApp和一个Scaffold。
  2. 在Scaffold的body中，我们使用了MapboxMap小部件来显示地图。
  3. accessToken属性用于设置Mapbox的访问令牌。
  4. initialCameraPosition属性用于设置地图的初始位置和缩放级别。
  5. mapboxMapOptions属性用于设置地图的样式。
  6. onMapCreated回调函数在地图创建完成后被调用，我们在其中添加了一个标记。

确保你已经正确配置了Mapbox的访问令牌，并且网络连接正常，以便能够加载地图数据。

运行这个应用，你应该会看到一个带有标记的Mapbox地图。

回到顶部