Flutter地图标记弹出插件flutter_map_marker_popup的使用
Flutter地图标记弹出插件 flutter_map_marker_popup
的使用
flutter_map_marker_popup
是一个使在 flutter_map
中添加标记弹出窗口变得简单的插件。本文将介绍如何使用这个插件,并提供一个完整的示例 demo。
开始使用
为了快速上手,可以参考 SimpleMapWithPopups 示例代码。对于更全面的选项展示,请运行 example/
目录中的 demo 应用程序,效果如下图所示:
常见问题
- 为什么当我点击标记时弹出窗口没有显示? 确保你的 Marker 构建器中没有 GestureDetector 阻止了该插件检测到 Marker 的点击事件。
集群支持
如果你需要同时支持标记弹出和标记集群,flutter_map_marker_popup
的弹出功能已经被集成到了优秀的 flutter_map_marker_cluster 插件中。
示例代码
下面是一个完整的示例 demo,演示了如何使用 flutter_map_marker_popup
插件来创建带有标记弹出窗口的地图应用。
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_marker_popup/flutter_map_marker_popup.dart';
import 'package:latlong2/latlong.dart';
class ExamplePopup extends StatelessWidget {
final Marker marker;
const ExamplePopup(this.marker, {super.key});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('This is a popup at ${marker.point}'),
),
);
}
}
class FlutterMapExample extends StatelessWidget {
const FlutterMapExample({super.key});
static final List<Marker> _markers = [
const LatLng(44.421, 10.404),
const LatLng(45.683, 10.839),
const LatLng(45.246, 5.783),
]
.map(
(markerPosition) => Marker(
point: markerPosition,
width: 40,
height: 40,
builder: (_) => const Icon(Icons.location_on, size: 40),
anchorPos: const AnchorPos.align(AnchorAlign.top),
rotateAlignment: AnchorAlign.top.rotationAlignment,
),
)
.toList();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter Map with Popup')),
body: FlutterMap(
options: const MapOptions(
initialZoom: 5.0,
initialCenter: LatLng(44.421, 10.404),
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
),
PopupMarkerLayer(
options: PopupMarkerLayerOptions(
markers: _markers,
popupDisplayOptions: PopupDisplayOptions(
builder: (BuildContext context, Marker marker) =>
ExamplePopup(marker),
),
),
),
],
),
);
}
}
在这个示例中,我们首先导入必要的包,然后定义了一个 ExamplePopup
小部件,用于展示每个标记的弹出内容。接着,在 FlutterMapExample
类中,我们创建了一些标记并配置了 FlutterMap
小部件,包括地图的基本设置、图层以及如何处理标记的弹出窗口。这样就可以实现当用户点击地图上的标记时,弹出相应的信息窗口。
更多关于Flutter地图标记弹出插件flutter_map_marker_popup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter地图标记弹出插件flutter_map_marker_popup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter应用中使用flutter_map_marker_popup
插件来在地图上添加标记并显示弹出窗口的代码示例。这个插件结合了flutter_map
插件来实现地图功能。
首先,确保你已经在pubspec.yaml
文件中添加了必要的依赖项:
dependencies:
flutter:
sdk: flutter
flutter_map: ^0.14.0 # 请根据需要检查最新版本
flutter_map_marker_popup: ^2.0.0 # 请根据需要检查最新版本
然后,运行flutter pub get
来安装这些依赖。
接下来,创建一个简单的Flutter应用,展示如何使用这些插件。以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_marker_popup/flutter_map_marker_popup.dart';
import 'package:latlong2/latlong.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Map Marker Popup Example'),
),
body: MapPage(),
),
);
}
}
class MapPage extends StatefulWidget {
@override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
final MapController _controller = MapController();
@override
Widget build(BuildContext context) {
return FlutterMap(
mapController: _controller,
options: MapOptions(
center: LatLng(51.505, -0.09),
zoom: 13.0,
),
layers: [
TileLayerOptions(
urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
subdomains: ['a', 'b', 'c'],
),
MarkerPopupLayerOptions(
markers: [
MarkerPopup(
point: LatLng(51.505, -0.09),
builder: (BuildContext context) => Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('London Eye'),
Text('A famous Ferris wheel in London'),
],
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
padding: EdgeInsets.all(8.0),
),
popupAnchor: PopupAnchor.bottom,
popupAlign: PopupAlign.center,
popupMargin: 8.0,
closeButton: IconButton(
icon: Icon(Icons.close),
onPressed: () => _controller.removeMarkerPopup(MarkerPopupId(id: 'london-eye')),
),
markerId: MarkerPopupId(id: 'london-eye'),
),
],
),
],
);
}
}
代码解释:
- 依赖导入:导入
flutter_map
和flutter_map_marker_popup
插件。 - 地图中心点和缩放级别:在
MapOptions
中设置地图的中心点和缩放级别。 - 瓦片图层:使用
TileLayerOptions
添加OpenStreetMap的瓦片图层。 - 标记弹出层:使用
MarkerPopupLayerOptions
添加标记弹出层,并在其中定义一个标记(MarkerPopup
)。 - 标记内容:使用
builder
函数定义标记弹出窗口的内容,这里是一个简单的Column
,包含两个Text
小部件。 - 弹出窗口样式:使用
decoration
属性定义弹出窗口的样式,包括背景颜色、边框半径和阴影。 - 关闭按钮:添加一个关闭按钮,当点击时,使用
_controller.removeMarkerPopup
方法移除标记弹出窗口。
这样,你就创建了一个简单的Flutter应用,展示了如何使用flutter_map_marker_popup
插件在地图上添加标记并显示弹出窗口。