Flutter地图浮动标记标题插件flutter_map_floating_marker_titles的使用

Flutter 地图浮动标记标题插件 flutter_map_floating_marker_titles 的使用

Floating Map Marker Titles 是一个用于 flutter_map 的插件，它利用了 flutter_map_floating_marker_titles 项目的核心库来实现地图上浮动标记标题的功能。

代码示例

你可以通过两种方式在 flutter_map 中使用浮动标记标题插件：

  1. 使用 FlutterMapWithFMTO 小部件作为 FlutterMap 的包装器。
  2. 使用 FloatingMarkerTitlesLayer 小部件作为 FlutterMap 的图层。
示例 1: 使用 FlutterMapWithFMTO
// 引入必要的包
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_floating_marker_titles/flutter_map_floating_marker_titles.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Map Floating Marker Titles Example'),
        ),
        body: Center(
          child: FlutterMapWithFMTO(
            // 浮动标题列表
            floatingTitles: floatingTitles,
            // 浮动标题选项
            fmtoOptions: fmtoOptions,
            // 其他属性与 FlutterMap 相同
            options: MapOptions(
              center: LatLng(0, 0),
              zoom: 13,
            ),
            children: [
              TileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              ),
            ],
          ),
        ),
      ),
    );
  }
}
示例 2: 使用 FloatingMarkerTitlesLayer
// 引入必要的包
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_floating_marker_titles/flutter_map_floating_marker_titles.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Map Floating Marker Titles Example'),
        ),
        body: Center(
          child: FlutterMap(
            options: MapOptions(
              center: LatLng(0, 0),
              zoom: 13,
            ),
            children: [
              TileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              ),
              FloatingMarkerTitlesLayer(
                // 浮动标题列表
                floatingTitles: floatingTitles,
                // 浮动标题选项
                fmtoOptions: fmtoOptions,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter地图浮动标记标题插件flutter_map_floating_marker_titles的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图浮动标记标题插件flutter_map_floating_marker_titles的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_map_floating_marker_titles插件来实现地图浮动标记标题的示例代码。

首先，确保你的Flutter项目中已经添加了flutter_map和flutter_map_floating_marker_titles依赖。在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^0.x.x  # 请替换为最新版本号
  flutter_map_floating_marker_titles: ^0.x.x  # 请替换为最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤来设置地图和浮动标记标题。

主文件（main.dart）

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:flutter_map_floating_marker_titles/flutter_map_floating_marker_titles.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 with Floating Marker Titles'),
        ),
        body: MapScreen(),
      ),
    );
  }
}

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

class _MapScreenState extends State<MapScreen> {
  final MapController _controller = MapController();

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      mapController: _controller,
      options: MapOptions(
        center: LatLng(51.5, -0.09),
        zoom: 13,
      ),
      layers: [
        TileLayerOptions(
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
        ),
        MarkerLayerOptions(
          markers: [
            Marker(
              width: 80.0,
              height: 80.0,
              point: LatLng(51.5, -0.09),
              builder: (ctx) => Container(
                child: FlutterMapMarkerPopup(
                  marker: Marker(
                    point: LatLng(51.5, -0.09),
                    builder: (ctx) => Icon(
                      Icons.location_on,
                      color: Colors.red,
                      size: 40,
                    ),
                  ),
                  child: Container(
                    color: Colors.white,
                    padding: EdgeInsets.all(8.0),
                    child: Text('London'),
                  ),
                ),
              ),
            ),
          ],
        ),
        FloatingMarkerTitlesLayerOptions(
          markers: [
            MarkerTitle(
              point: LatLng(51.5, -0.09),
              title: 'London',
              style: TextStyle(color: Colors.black, fontSize: 16),
              anchor: AnchorPos.bottom,
              showBackground: true,
              backgroundColor: Colors.white.withOpacity(0.8),
              padding: EdgeInsets.all(4.0),
              borderRadius: BorderRadius.circular(8.0),
            ),
          ],
        ),
      ],
    );
  }
}

说明

  1. 依赖引入：确保引入了flutter_map和flutter_map_floating_marker_titles依赖。
  2. 地图配置：使用FlutterMap组件，并配置地图的中心点、缩放级别等选项。
  3. 图层配置：
    • TileLayerOptions：用于加载地图瓦片。
    • MarkerLayerOptions：用于显示标记（Marker）。这里我们使用了FlutterMapMarkerPopup来实现点击标记时显示弹窗信息。
    • FloatingMarkerTitlesLayerOptions：用于显示浮动标记标题。这里我们配置了标题的文本、样式、锚点位置、背景颜色等。

这样，你就成功地在Flutter应用中集成了flutter_map_floating_marker_titles插件，并实现了地图浮动标记标题的功能。根据实际需求，你可以进一步自定义和扩展这些功能。

回到顶部