Flutter标记创建插件marker_crafter的使用

Flutter标记创建插件marker_crafter的使用

Marker Crafter

Marker Crafter 是一个用于在地图上添加用户定义的文本标签的 Flutter 包。通过使用 Google Maps Flutter 包，您可以向地图上的标记添加自定义文本。

使用

1. 首先，将 google_maps_flutter 包添加到您的项目中。 修改 pubspec.yaml 文件如下：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

1. 然后，将 marker_crafter 包添加到您的项目中。 修改 pubspec.yaml 文件如下并添加包：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10
  marker_crafter: ^1.1.3

1. 接下来是一个示例代码：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:marker_crafter/marker_crafter.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> {
  Set<Marker> markers = {};

  [@override](/user/override)
  void initState() {
    super.initState();
    addMarkers();
  }

  void addMarkers() async {
    MarkerCrafter marker = MarkerCrafter(
      text: "Marker Label",
      markerId: MarkerId("markerIdString"),
      position: LatLng(11.1203, 45.33),
    );

    bool success = await markers.addTextMarker(marker);
    if (success) {
      setState(() {});
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Marker Crafter Demo"),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(11.1203, 45.33),
          zoom: 10,
        ),
        markers: markers,
      ),
    );
  }
}

在这个示例中，我们使用 MarkerCrafter 类将一个标记添加到地图上。addTextMarker 函数接受一个 MarkerCrafter 实例，并根据给定的文本创建一个标记。

完整的示例代码

以下是从 GitHub 获取的完整示例代码：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:marker_crafter/extension/marker_crafter_add_extension.dart';
import 'package:marker_crafter/marker_crafter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  [@override](/user/override)
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  Set<Marker> markers = {};

  [@override](/user/override)
  void initState() {
    super.initState();
    addMarkers();
  }

  void addMarkers() async {
    MarkerCrafter marker = MarkerCrafter(
      text: "1",
      markerId: const MarkerId("markerIdString"),
      position: const LatLng(41.087577, 28.809226),
      backgroundColor: Colors.red,
    );

    bool success = await markers.addTextMarker2(marker);
    if (success) {
      setState(() {});
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Marker Crafter Demo"),
      ),
      body: GoogleMap(
        initialCameraPosition: const CameraPosition(
          target: LatLng(41.087577, 28.809226),
          zoom: 10,
        ),
        markers: markers,
      ),
    );
  }
}