Flutter地图控制插件map_controller的使用

简介

map_controller 是一个用于管理 Flutter 地图控件的插件。它允许开发者轻松地控制地图的缩放、中心位置,并添加标记(markers)、线(lines)和多边形(polygons)。此外,该插件还支持从 GeoJSON 文件加载数据并动态切换瓦片图层。

pub package

你可以通过以下链接查看在线演示: Web Demo


使用方法

初始化控制器

首先,我们需要初始化 MapControllerStatefulMapController,并监听它们的状态变化以确保在状态更新时重新构建界面。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
import 'package:map_controller/map_controller.dart';

class MapPageState extends State<MapPage> {
  MapController mapController;
  StatefulMapController statefulMapController;
  StreamSubscription<StatefulMapControllerStateChange> sub;

  @override
  void initState() {
    // 初始化地图控制器
    mapController = MapController();
    statefulMapController = StatefulMapController(mapController: mapController);

    // 等待控制器准备就绪后执行回调
    statefulMapController.onReady.then((_) => print("The map controller is ready"));

    // 监听状态变化流,以便在状态更新时重建界面
    sub = statefulMapController.changeFeed.listen((change) => setState(() {}));

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            // 使用 Flutter Map 显示地图
            FlutterMap(
              mapController: mapController,
              options: MapOptions(
                center: LatLng(48.853831, 2.348722), // 设置初始中心点
                zoom: 11.0, // 设置初始缩放级别
              ),
              layers: [
                // 添加标记层
                MarkerLayerOptions(markers: statefulMapController.markers),
                // 添加线段层
                PolylineLayerOptions(polylines: statefulMapController.lines),
                // 添加多边形层
                PolygonLayerOptions(polygons: statefulMapController.polygons),
              ],
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 取消订阅状态变化流
    sub.cancel();
    super.dispose();
  }
}

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

API 文档

以下是 StatefulMapController 提供的主要功能及其用法:

地图控制

缩放控制

  • zoom: 获取当前缩放值。
  • zoomIn(): 增加缩放级别。
  • zoomOut(): 减少缩放级别。
  • zoomTo(double value): 将缩放级别设置为指定值。

中心控制

  • center: 获取当前中心点。
  • centerOnPoint(LatLng point): 将地图中心移动到指定的经纬度。

地图资产

标记(Markers)

  • addMarker(String name, Marker marker): 添加一个命名的标记。
  • addMarkers(Map<String, Marker> markers): 批量添加命名标记。
  • removeMarker(String name, Marker marker): 移除一个命名标记。
  • removeMarkers(Map<String, Marker> markers): 批量移除命名标记。
  • markers: 获取所有标记。
  • namedMarkers: 获取带有名称的所有标记。

动态标记(Stateful Markers)

支持动态更新标记内容的新特性(版本 0.7+):

statefulMapController.addStatefulMarker(
  name: "some marker",
  statefulMarker: StatefulMarker(
    height: 80.0,
    width: 120.0,
    state: {"showText": false},
    point: LatLng(48.853831, 2.348722),
    builder: (BuildContext context, Map<String, dynamic> state) {
      Widget w;
      final markerIcon = IconButton(
        icon: const Icon(Icons.location_on),
        onPressed: () =>
            statefulMapController.mutateMarker(
                name: "some marker", property: "showText", value: !state["showText"]));

      if (state["showText"] == true) {
        w = Column(
          children: <Widget>[
            markerIcon,
            Container(
              color: Colors.white,
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: Text("Place Name", textScaleFactor: 1.3),
              ),
            ),
          ],
        );
      } else {
        w = markerIcon;
      }
      return w;
    },
  ),
);

线段(Lines)

  • addLine(String name, List<LatLng> points, double width, Color color, bool isDotted): 添加一条线段。
  • lines: 获取所有线段。

多边形(Polygons)

  • addPolygon(String name, List<LatLng> points, double width, Color color, double borderWidth, Color borderColor): 添加一个多边形。
  • polygons: 获取所有多边形。

准备完成回调

可以通过 onReady 属性监听地图是否准备就绪:

@override
void initState() {
  statefulMapController.onReady.then((_) {
    setState(() => _ready = true);
  });
  super.initState();
}

状态变化流

通过 changeFeed 监听地图状态的变化:

statefulMapController.onReady.then((_) {
  statefulMapController.changeFeed.listen((change) => setState(() {}));
});

GeoJSON 数据加载

支持从 GeoJSON 文件加载数据并绘制标记:

void loadData() async {
  print("Loading geojson data");
  final data = await rootBundle.loadString('assets/airports.geojson');
  await statefulMapController.fromGeoJson(data,
    markerIcon: Icon(Icons.local_airport), verbose: true);
}

@override
void initState() {
  mapController = MapController();
  statefulMapController = StatefulMapController(mapController: mapController);
  statefulMapController.onReady.then((_) => loadData());
  sub = statefulMapController.changeFeed.listen((change) => setState(() {}));
  super.initState();
}

瓦片图层管理

支持动态切换瓦片图层类型:

FlutterMap(
  mapController: mapController,
  options: MapOptions(
    center: LatLng(48.853831, 2.348722), zoom: 11.0),
  layers: [
    // 使用默认瓦片图层
    statefulMapController.tileLayer,
    MarkerLayerOptions(markers: statefulMapController.markers),
  ],
);

// 切换瓦片图层类型
statefulMapController.switchTileLayer(TileLayerType.monochrome);
1 回复

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


map_controller 是一个用于在 Flutter 中控制地图的插件,它通常与 flutter_map 插件一起使用。flutter_map 是一个基于 Leaflet 的 Flutter 地图库,而 map_controller 则提供了对地图的更多控制功能,例如移动地图、缩放、添加标记等。

安装依赖

首先,你需要在 pubspec.yaml 文件中添加 flutter_mapmap_controller 的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^4.0.0
  map_controller: ^2.0.0

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

基本用法

以下是一个简单的示例,展示如何使用 map_controller 来控制地图:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:map_controller/map_controller.dart';
import 'package:latlong2/latlong.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 MapController mapController = MapController();
  final StatefulMapController statefulMapController = StatefulMapController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Map with Map Controller'),
      ),
      body: FlutterMap(
        mapController: mapController,
        options: MapOptions(
          center: LatLng(51.5, -0.09), // 初始中心点
          zoom: 10.0, // 初始缩放级别
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c'],
          ),
        ],
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              // 移动地图到指定位置
              mapController.move(LatLng(48.8566, 2.3522), 12.0);
            },
            child: Icon(Icons.location_on),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              // 放大
              mapController.move(mapController.center, mapController.zoom + 1);
            },
            child: Icon(Icons.zoom_in),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              // 缩小
              mapController.move(mapController.center, mapController.zoom - 1);
            },
            child: Icon(Icons.zoom_out),
          ),
        ],
      ),
    );
  }
}

解释

  1. MapController: 这是 flutter_map 提供的基本控制器,用于控制地图的移动、缩放等操作。

  2. StatefulMapController: 这是 map_controller 提供的扩展控制器,它提供了更多的功能,例如管理标记、多边形等。

  3. FlutterMap: 这是 flutter_map 提供的地图组件,用于显示地图。

  4. TileLayerOptions: 用于配置地图的瓦片图层,通常使用 OpenStreetMap 或其他地图服务提供商的瓦片。

  5. FloatingActionButton: 用于触发地图的移动和缩放操作。

更多功能

map_controller 还支持更多高级功能,例如:

  • 添加标记: 使用 MarkerLayerOptionsMarker 来在地图上添加标记。
  • 绘制多边形: 使用 PolygonLayerOptionsPolygon 来在地图上绘制多边形。
  • 事件监听: 监听地图的点击、移动等事件。

示例:添加标记

MarkerLayerOptions(
  markers: [
    Marker(
      width: 80.0,
      height: 80.0,
      point: LatLng(51.5, -0.09),
      builder: (ctx) => Icon(Icons.location_on, color: Colors.red),
    ),
  ],
),
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!