Flutter地图标记标题显示插件flutter_floating_map_marker_titles_core的使用

Flutter 地图标记标题显示插件 flutter_floating_map_marker_titles_core 的使用

简介

flutter_floating_map_marker_titles_core 是 Flutter Floating Map Marker Titles 项目的核心库。此核心库不依赖于任何特定的地图视图实现细节，因此可以与各种地图提供商一起重用。

使用示例

在本示例中，我们将展示如何使用 flutter_floating_map_marker_titles_core 插件来在地图上显示带有浮动标题的标记。

首先，确保你已经在 pubspec.yaml 文件中添加了必要的依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^3.0.0
  flutter_floating_map_marker_titles_core: ^1.0.0

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

接下来，我们创建一个简单的地图应用，并在地图上添加多个标记，每个标记都有一个浮动的标题。

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_floating_map_marker_titles_core/floating_map_marker_titles_core.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  final List<Marker> _markers = [
    Marker(
      width: 80.0,
      height: 80.0,
      point: LatLng(37.7749, -122.4194), // 旧金山坐标
      builder: (ctx) => Container(
        child: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.location_city),
        ),
      ),
    ),
    Marker(
      width: 80.0,
      height: 80.0,
      point: LatLng(34.0522, -118.2437), // 洛杉矶坐标
      builder: (ctx) => Container(
        child: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.location_city),
        ),
      ),
    ),
    Marker(
      width: 80.0,
      height: 80.0,
      point: LatLng(40.7128, -74.0060), // 纽约坐标
      builder: (ctx) => Container(
        child: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.location_city),
        ),
      ),
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 地图标记标题显示插件示例'),
      ),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(37.7749, -122.4194),
          zoom: 6.0,
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c'],
          ),
          MarkerLayerOptions(
            markers: _markers,
          ),
          FloatingMapMarkerTitlesCore(
            markers: _markers,
            builder: (context, marker) {
              return Text(marker.options.point.toString());
            },
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


flutter_floating_map_marker_titles_core 是一个用于在 Flutter 地图上显示浮动标记标题的插件。它可以帮助你在地图上展示标记点的标题，并且这些标题会随着地图的缩放和平移而动态调整位置，以确保始终可见。

安装

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_floating_map_marker_titles_core: ^1.0.0  # 请使用最新版本

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

基本用法

以下是一个简单的示例，展示如何使用 flutter_floating_map_marker_titles_core 插件在地图上显示标记标题。

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:flutter_floating_map_marker_titles_core/flutter_floating_map_marker_titles_core.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Floating Map Marker Titles'),
      ),
      body: FlutterMap(
        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'],
          ),
          MarkerLayerOptions(
            markers: [
              Marker(
                width: 80.0,
                height: 80.0,
                point: LatLng(51.5, -0.09),
                builder: (ctx) => Icon(Icons.location_on, color: Colors.red),
                title: 'London',
              ),
              Marker(
                width: 80.0,
                height: 80.0,
                point: LatLng(51.4, -0.08),
                builder: (ctx) => Icon(Icons.location_on, color: Colors.blue),
                title: 'Greenwich',
              ),
            ],
          ),
          FloatingMarkerTitlesLayerOptions(
            markers: [
              Marker(
                width: 80.0,
                height: 80.0,
                point: LatLng(51.5, -0.09),
                builder: (ctx) => Icon(Icons.location_on, color: Colors.red),
                title: 'London',
              ),
              Marker(
                width: 80.0,
                height: 80.0,
                point: LatLng(51.4, -0.08),
                builder: (ctx) => Icon(Icons.location_on, color: Colors.blue),
                title: 'Greenwich',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

代码解释

  1. FlutterMap: 使用 flutter_map 插件来显示地图。
  2. TileLayerOptions: 定义地图的瓦片图层，使用 OpenStreetMap 的瓦片服务。
  3. MarkerLayerOptions: 定义地图上的标记点。
  4. FloatingMarkerTitlesLayerOptions: 使用 flutter_floating_map_marker_titles_core 插件来显示标记点的浮动标题。

自定义标题样式

你可以通过 FloatingMarkerTitlesLayerOptions 的 titleBuilder 属性来自定义标题的样式。例如：

FloatingMarkerTitlesLayerOptions(
  markers: [
    Marker(
      width: 80.0,
      height: 80.0,
      point: LatLng(51.5, -0.09),
      builder: (ctx) => Icon(Icons.location_on, color: Colors.red),
      title: 'London',
    ),
  ],
  titleBuilder: (context, marker) {
    return Text(
      marker.title,
      style: TextStyle(
        color: Colors.black,
        fontWeight: FontWeight.bold,
        fontSize: 14.0,
        backgroundColor: Colors.white.withOpacity(0.8),
      ),
    );
  },
),
回到顶部