Flutter地图展示与交互插件mapbox_gl_dart的使用

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

Flutter地图展示与交互插件mapbox_gl_dart的使用

Mapbox-gl-dart 是一个用于在 Dart 中使用 Mapbox GL JS 的库。本文将介绍如何在 Flutter Web 项目中使用该插件来展示和交互地图。

使用此包

引入 Mapbox GL JS

首先，您需要在 .html 文件中引入 Mapbox GL JS 库：

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

创建地图容器

在 HTML 文件的 <body> 标签内添加一个用于显示地图的 div 容器：

<body>
    <div id='map'></div>
</body>

初始化地图

在 Dart 文件中初始化 Mapbox 地图：

import 'package:mapbox_gl_dart/mapbox_gl_dart.dart' as mapboxgl;

void main() {
  // 设置您的 Mapbox 访问令牌
  mapboxgl.Mapbox.accessToken = 'YOUR_TOKEN_HERE';

  // 初始化地图
  var map = mapboxgl.MapboxMap(
    mapboxgl.MapOptions(
      container: 'map', // 对应 HTML 中的 div id
      style: 'mapbox://styles/mapbox/dark-v10', // 地图样式
      center: mapboxgl.LngLat(7.68227, 45.06755), // 初始中心点
      zoom: 12, // 初始缩放级别
    ),
  );
}

请确保替换 'YOUR_TOKEN_HERE' 为您自己的 Mapbox 访问令牌。

示例 Demo

以下是一个完整的示例项目结构及代码片段，帮助您快速上手：

项目结构

my_mapbox_flutter_project/
├── web/
│   ├── index.html
│   └── main.dart
└── pubspec.yaml

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mapbox Example</title>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css' rel='stylesheet'/>
  <style>
    body, html { margin: 0; padding: 0; height: 100%; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id='map'></div>
  <script defer src="main.dart.js"></script>
</body>
</html>

main.dart

import 'package:mapbox_gl_dart/mapbox_gl_dart.dart' as mapboxgl;

void main() {
  // 设置您的 Mapbox 访问令牌
  mapboxgl.Mapbox.accessToken = 'YOUR_TOKEN_HERE';

  // 初始化地图
  var map = mapboxgl.MapboxMap(
    mapboxgl.MapOptions(
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: mapboxgl.LngLat(-73.99169, 40.73526),
      zoom: 12,
    ),
  );

  // 添加一个标记
  map.addLayer(mapboxgl.Layer(
    id: 'markers',
    type: 'symbol',
    source: mapboxgl.Source(
      type: 'geojson',
      data: {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': {'type': 'Point', 'coordinates': [-73.99169, 40.73526]},
            'properties': {},
          },
        ],
      },
    ),
    layout: {
      'icon-image': 'marker-15',
      'icon-size': 1,
    },
  ));
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用mapbox_gl_dart插件来展示和交互地图的示例代码。请注意，mapbox_gl_dart并不是官方或广泛使用的Flutter Mapbox插件，常见的Flutter Mapbox插件是flutter_mapbox_gl。不过，由于你的要求，我会基于假设的mapbox_gl_dart（或类似的自定义封装）提供一个示例。如果你实际使用的是flutter_mapbox_gl，请相应调整。

首先，确保在你的pubspec.yaml文件中添加了mapbox_gl_dart（或实际使用的插件）的依赖：

dependencies:
  flutter:
    sdk: flutter
  mapbox_gl_dart: ^x.y.z  # 替换为实际版本号

然后运行flutter pub get来获取依赖。

接下来是一个基本的Flutter应用，它展示了如何使用mapbox_gl_dart来加载和交互地图：

import 'package:flutter/material.dart';
import 'package:mapbox_gl_dart/mapbox_gl_dart.dart';  // 假设的包名

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  final MapboxController _mapboxController = MapboxController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mapbox GL Example'),
      ),
      body: MapboxMap(
        accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',  // 替换为你的Mapbox访问令牌
        controller: _mapboxController,
        options: MapboxOptions(
          styleUrl: MapboxStyles.STREETS,
          center: LatLng(37.7749, -122.4194),  // 初始中心点（例如：旧金山）
          zoom: 12.0,
        ),
        onMapCreated: (controller) {
          _mapboxController.complete(controller);
        },
        onMapClick: (point) {
          // 地图点击事件处理
          print('Map clicked at: ${point.latitude}, ${point.longitude}');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 示例：通过控制器改变地图中心
          _mapboxController.animateCamera(CameraUpdate.newLatLng(LatLng(34.0522, -118.2437)));  // 例如：洛杉矶
        },
        tooltip: 'Move to LA',
        child: Icon(Icons.directions),
      ),
    );
  }
}

在这个示例中：

  1. MapboxController 是一个假设的控制器类，用于与地图实例进行交互。实际使用时，请参考插件文档了解具体的控制器类。
  2. MapboxMap 是地图的显示组件，需要传入accessToken（你的Mapbox访问令牌），controller（用于控制地图），和options（地图的初始配置）。
  3. onMapCreated 回调在地图创建完成后被调用，此时你可以完成控制器的初始化。
  4. onMapClick 回调处理地图点击事件，这里简单地打印了点击的经纬度。
  5. 浮动操作按钮（FAB）用于演示如何通过控制器改变地图的中心点。

请注意，由于mapbox_gl_dart并非官方插件，具体的API和方法可能会有所不同。如果实际使用的是flutter_mapbox_gl，请参考其官方文档和示例代码进行调整。

回到顶部