Flutter地图标记弹出插件flutter_map_marker_popup的使用

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

Flutter地图标记弹出插件 flutter_map_marker_popup 的使用

flutter_map_marker_popup 是一个使在 flutter_map 中添加标记弹出窗口变得简单的插件。本文将介绍如何使用这个插件,并提供一个完整的示例 demo。

开始使用

为了快速上手,可以参考 SimpleMapWithPopups 示例代码。对于更全面的选项展示,请运行 example/ 目录中的 demo 应用程序,效果如下图所示:

Example

常见问题

  • 为什么当我点击标记时弹出窗口没有显示? 确保你的 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

1 回复

更多关于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'),
            ),
          ],
        ),
      ],
    );
  }
}

代码解释:

  1. 依赖导入:导入flutter_mapflutter_map_marker_popup插件。
  2. 地图中心点和缩放级别:在MapOptions中设置地图的中心点和缩放级别。
  3. 瓦片图层:使用TileLayerOptions添加OpenStreetMap的瓦片图层。
  4. 标记弹出层:使用MarkerPopupLayerOptions添加标记弹出层,并在其中定义一个标记(MarkerPopup)。
  5. 标记内容:使用builder函数定义标记弹出窗口的内容,这里是一个简单的Column,包含两个Text小部件。
  6. 弹出窗口样式:使用decoration属性定义弹出窗口的样式,包括背景颜色、边框半径和阴影。
  7. 关闭按钮:添加一个关闭按钮,当点击时,使用_controller.removeMarkerPopup方法移除标记弹出窗口。

这样,你就创建了一个简单的Flutter应用,展示了如何使用flutter_map_marker_popup插件在地图上添加标记并显示弹出窗口。

回到顶部