Flutter地图控制插件map_controller的使用
简介
map_controller
是一个用于管理 Flutter 地图控件的插件。它允许开发者轻松地控制地图的缩放、中心位置,并添加标记(markers)、线(lines)和多边形(polygons)。此外,该插件还支持从 GeoJSON 文件加载数据并动态切换瓦片图层。
你可以通过以下链接查看在线演示: Web Demo
使用方法
初始化控制器
首先,我们需要初始化 MapController
和 StatefulMapController
,并监听它们的状态变化以确保在状态更新时重新构建界面。
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);
更多关于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_map
和 map_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),
),
],
),
);
}
}
解释
-
MapController: 这是
flutter_map
提供的基本控制器,用于控制地图的移动、缩放等操作。 -
StatefulMapController: 这是
map_controller
提供的扩展控制器,它提供了更多的功能,例如管理标记、多边形等。 -
FlutterMap: 这是
flutter_map
提供的地图组件,用于显示地图。 -
TileLayerOptions: 用于配置地图的瓦片图层,通常使用 OpenStreetMap 或其他地图服务提供商的瓦片。
-
FloatingActionButton: 用于触发地图的移动和缩放操作。
更多功能
map_controller
还支持更多高级功能,例如:
- 添加标记: 使用
MarkerLayerOptions
和Marker
来在地图上添加标记。 - 绘制多边形: 使用
PolygonLayerOptions
和Polygon
来在地图上绘制多边形。 - 事件监听: 监听地图的点击、移动等事件。
示例:添加标记
MarkerLayerOptions(
markers: [
Marker(
width: 80.0,
height: 80.0,
point: LatLng(51.5, -0.09),
builder: (ctx) => Icon(Icons.location_on, color: Colors.red),
),
],
),