Flutter标签标记插件label_marker的使用

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

Flutter标签标记插件label_marker的使用

label_marker是一个Flutter插件，用于创建和使用带有标签文本的Google Maps标记；这是最简单且最高效的方法。

Features

  • 在Flutter应用程序中包含带文本的地图标记
  • 自定义标签的背景颜色
  • 自定义标签的字体样式
  • 实现任何其他与普通标记相同的功能

logo

Getting started

  1. 完成拥有Google Maps的基本设置。
  2. 创建一组普通的标记（Set<Marker>），并将其设置为Google Maps widget的markers参数。
  3. 导入此包；label_marker，并在想要添加标签标记时调用addLabelMarker()函数。
  4. 将一个LabelMarker widget传递给上述函数，通过提供所需的参数（即，标签、位置和markerId）来创建它。（见示例。）
  5. 记住要在addLabelMarker()函数后使用’then’关键字调用setState。
markers.addLabelMarker(LabelMarker(
    label: "TextToShow",
    markerId: MarkerId("idString"),
    position: LatLng(10.0, 11.0),
    backgroundColor: Colors.green,
    )).then((value) {
    setState(() {});
    },
);

示例代码

以下是一个完整的示例demo，展示了如何在项目中使用label_marker插件。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:label_marker/label_marker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Label Marker example',
      home: MyHomePage(title: 'Label Marker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Set<Marker> markers = {};
  GoogleMapController? controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GoogleMap(
        initialCameraPosition: const CameraPosition(
          target: LatLng(0, 0),
          zoom: 1,
        ),
        markers: markers,
        onMapCreated: ((mapController) {
          setState(() {
            controller = mapController;
          });
        }),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: (() {
          final lat = (Random().nextDouble() * 180) - 90;
          final lng = (Random().nextDouble() * 360) - 180;
          final title = "title${Random().nextInt(1000)}";
          markers
              .addLabelMarker(LabelMarker(
            label: title,
            markerId: MarkerId(title),
            position: LatLng(lat, lng),
            backgroundColor: Colors.green,
          ))
              .then(
            (value) {
              setState(() {});
            },
          );
        }),
      ),
    );
  }
}

这个示例创建了一个简单的Flutter应用，其中包含一个带有浮动操作按钮的Google地图。点击按钮会在随机位置添加一个带有标签的标记。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用label_marker插件的一个基本示例。label_marker插件允许你在地图上添加标签标记，这对于显示地点信息、导航指示等非常有用。

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

dependencies:
  flutter:
    sdk: flutter
  label_marker: ^最新版本号 # 替换为实际的最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤来使用label_marker插件：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:label_marker/label_marker.dart';

  1. 设置Google Maps API密钥（确保你已经在Google Cloud Platform上设置了API密钥，并在AndroidManifest.xml和Info.plist中进行了相应的配置）。

  2. 创建一个包含地图和标签标记的Widget：

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

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController _mapController;
  late LatLng _center;
  Set<Marker> _markers = Set<Marker>();
  Set<LabelMarker> _labelMarkers = Set<LabelMarker>();

  @override
  void initState() {
    super.initState();
    _center = LatLng(-34, 151); // 默认中心位置
  }

  void _onMapCreated(GoogleMapController controller) {
    _mapController = controller;
    // 添加一个示例标签标记
    _addLabelMarker();
  }

  void _addLabelMarker() {
    setState(() {
      _labelMarkers.add(
        LabelMarker(
          position: LatLng(-34, 151.05), // 标签位置
          text: 'Hello, World!', // 标签文本
          textStyle: TextStyle(color: Colors.red, fontSize: 16),
          anchor: Offset(0.5, -1), // 锚点，相对于标签文本的位置
          rotation: 0.0, // 旋转角度
          backgroundColor: Colors.white,
          padding: EdgeInsets.all(8.0),
          borderRadius: 8.0,
          borderWidth: 2.0,
          borderColor: Colors.black,
          zIndex: 1, // 标签层级
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Label Marker Example'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
        markers: _markers,
        onMapCreated: _onMapCreated,
        labelMarkers: _labelMarkers, // 添加标签标记集合
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addLabelMarker,
        tooltip: 'Add Label Marker',
        child: Icon(Icons.add),
      ),
    );
  }
}
  1. 在你的主应用文件中使用这个Widget：
import 'package:flutter/material.dart';
import 'map_screen.dart'; // 假设你将上面的代码放在map_screen.dart文件中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

这个示例展示了如何在Flutter中使用label_marker插件在Google Maps上添加标签标记。你可以根据需要调整标签的样式、位置和其他属性。确保你已经正确配置了Google Maps API，并在运行应用时连接到互联网。

回到顶部