Flutter自定义地图标记插件google_maps_custom_marker的使用

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

Flutter自定义地图标记插件google_maps_custom_marker的使用

google_maps_custom_marker

本README描述了该包的功能。如果你将此包发布到pub.dev，则此README的内容将出现在你的包的首页上。

关于如何编写好的包README的指南，请参阅编写包页面。

关于开发包的一般信息，请参阅Dart指南的创建包和Flutter指南的开发包和插件。

功能

你可以通过此包在你的Flutter应用中实现以下功能：

  • 使用google_maps_flutter动态创建标记
  • 在标记上添加文本标签
  • 创建圆形、针形和气泡形状的标记
  • 自定义外观，包括颜色、填充、阴影等选项

开始使用

  1. 遵循google_maps_flutter的开始使用说明。
  2. 创建一个带有所需位置和其他属性的标记。
  3. 导入此包，并将你的标记传递给GoogleMapsCustomMarker.createCustomMarker()方法。
  4. 配置形状、样式和特定于形状的选项。
  5. 返回的标记具有更新的图标和锚点，并已准备好与你的地图一起使用。

示例代码

Marker pinMarker = await GoogleMapsCustomMarker.createCustomMarker(
    marker: const Marker(
        markerId: MarkerId('pin'),
        position: LatLng(49,-123),
    ),
    shape: MarkerShape.pin,
    title: '99',
);

Marker circleMarker = await GoogleMapsCustomMarker.createCustomMarker(
    marker: const Marker(
        markerId: MarkerId('circle'),
        position: LatLng(49.01,-123),
    ),
    shape: MarkerShape.circle,
    title: '99',
);

Marker bubbleMarkerCustomized = await GoogleMapsCustomMarker.createCustomMarker(
    marker: const Marker(
        markerId: MarkerId('bubble'),
        position: LatLng(49.02,-123),
    ),
    shape: MarkerShape.bubble,
    title: 'Customize Me!',
    backgroundColor: GoogleMapsCustomMarkerColor.markerYellow.withOpacity(.8),
    foregroundColor: Colors.black,
    textSize: 38,
    enableShadow: false,
    padding: 150,
    textStyle: const TextStyle(decoration: TextDecoration.underline),
    imagePixelRatio: 1.5,
    bubbleOptions: BubbleMarkerOptions(
        anchorTriangleWidth: 32,
        anchorTriangleHeight: 48,
        cornerRadius: 12,
    ),
);

_markers.addAll([pinMarker, circleMarker, bubbleMarkerCustomized]);

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用google_maps_custom_marker插件来创建自定义地图标记。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_custom_marker/google_maps_custom_marker.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Custom Marker Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Google Maps Custom Marker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Set<Marker> _markers = {};
  static const LatLng _center = LatLng(49.281986774819636, -123.1254609406434);
  final Completer<GoogleMapController> _controller = Completer<GoogleMapController>();
  Future<void>? _addMarkersFuture;

  static const CameraPosition _position = CameraPosition(
    target: _center,
    zoom: 13,
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    _addMarkersFuture = _addMarkers();
  }

  Future<void> _addMarkers() async {
    // 创建针形标记
    for (int i = 0; i < 6; i++) {
      Marker pinMarker = await GoogleMapsCustomMarker.createCustomMarker(
        marker: Marker(
          markerId: MarkerId('pin_$i'),
          position: LatLng(
              _center.latitude + 0.03, _center.longitude - 0.025 + i * 0.01),
        ),
        shape: MarkerShape.pin,
        pinOptions: PinMarkerOptions(diameter: 14 + i * 8),
      );
      _markers.add(pinMarker);
    }

    // 创建带编号的针形标记
    for (int i = 0; i < 6; i++) {
      Marker pinMarker = await GoogleMapsCustomMarker.createCustomMarker(
        marker: Marker(
          markerId: MarkerId('pin_labeled_$i'),
          position: LatLng(
              _center.latitude + 0.02, _center.longitude - 0.025 + i * 0.01),
        ),
        shape: MarkerShape.pin,
        backgroundColor: GoogleMapsCustomMarkerColor
            .markerColors[i % GoogleMapsCustomMarkerColor.markerColors.length],
        title: (i + 1).toString(),
      );
      _markers.add(pinMarker);
    }

    // 创建圆形标记
    for (int i = 0; i < 6; i++) {
      Marker pinMarker = await GoogleMapsCustomMarker.createCustomMarker(
        marker: Marker(
          markerId: MarkerId('circle_$i'),
          position: LatLng(
              _center.latitude + 0.015, _center.longitude - 0.025 + i * 0.01),
        ),
        shape: MarkerShape.circle,
        backgroundColor: GoogleMapsCustomMarkerColor
            .markerColors[i % GoogleMapsCustomMarkerColor.markerColors.length],
        title: (i + 1).toString(),
      );
      _markers.add(pinMarker);
    }

    // 演示所有标记形状的居中对齐
    _markers.add(await GoogleMapsCustomMarker.createCustomMarker(
      marker: const Marker(
        markerId: MarkerId('centered_bubble_no_anchor'),
        position: _center,
        zIndex: 1,
      ),
      shape: MarkerShape.bubble,
      backgroundColor: GoogleMapsCustomMarkerColor.markerGrey,
      title: 'Centered Bubble without Anchor Triangle',
      bubbleOptions: BubbleMarkerOptions(enableAnchorTriangle: false),
    ));
    _markers.add(await GoogleMapsCustomMarker.createCustomMarker(
      marker: const Marker(
        markerId: MarkerId('centered_circle'),
        position: _center,
        zIndex: 2,
      ),
      shape: MarkerShape.circle,
      backgroundColor: GoogleMapsCustomMarkerColor.markerBlue,
      circleOptions: CircleMarkerOptions(
        diameter: 18,
      ),
    ));
    _markers.add(await GoogleMapsCustomMarker.createCustomMarker(
      marker: const Marker(
        markerId: MarkerId('centered_bubble'),
        position: _center,
        zIndex: 3,
      ),
      shape: MarkerShape.bubble,
      title: 'Centered Bubble',
      bubbleOptions: BubbleMarkerOptions(
          anchorTriangleWidth: 82, anchorTriangleHeight: 48),
    ));
    _markers.add(await GoogleMapsCustomMarker.createCustomMarker(
      marker: const Marker(
        markerId: MarkerId('centered_pin'),
        position: _center,
        zIndex: 4,
      ),
      shape: MarkerShape.pin,
      backgroundColor: GoogleMapsCustomMarkerColor.markerGreen,
    ));

    // 创建气泡标记
    _markers.add(await GoogleMapsCustomMarker.createCustomMarker(
      marker: Marker(
        markerId: const MarkerId('bubble'),
        position: LatLng(_center.latitude - 0.02, _center.longitude),
      ),
      shape: MarkerShape.bubble,
      title: 'Hello World!',
    ));

    // 创建自定义气泡标记
    _markers.add(await GoogleMapsCustomMarker.createCustomMarker(
      marker: Marker(
        markerId: const MarkerId('custom_bubble'),
        position: LatLng(_center.latitude - 0.04, _center.longitude),
      ),
      shape: MarkerShape.bubble,
      title: 'Customize Me!',
      backgroundColor: GoogleMapsCustomMarkerColor.markerYellow.withOpacity(.8),
      foregroundColor: Colors.black,
      textSize: 38,
      enableShadow: false,
      padding: 150,
      textStyle: const TextStyle(decoration: TextDecoration.underline),
      imagePixelRatio: 1.5,
      bubbleOptions: BubbleMarkerOptions(
        anchorTriangleWidth: 32,
        anchorTriangleHeight: 48,
      ),
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder(
          future: _addMarkersFuture, // 等待标记加载完成后再构建地图
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(
                  child: CircularProgressIndicator()); // 显示加载进度条
            } else if (snapshot.hasError) {
              return Center(
                  child: Text(
                      'Error: ${snapshot.error}')); // 显示加载错误信息
            } else {
              return GoogleMap(
                initialCameraPosition: _position,
                markers: _markers,
                onMapCreated: (GoogleMapController controller) {
                  _controller.complete(controller);
                },
              );
            }
          }),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用google_maps_custom_marker插件来自定义地图标记的示例代码。请注意，为了运行这个示例，你需要先确保你的Flutter项目已经正确配置了Google Maps服务，并且已经添加了必要的API密钥。

首先，确保在你的pubspec.yaml文件中添加了google_maps_flutter和google_maps_custom_marker依赖项：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1  # 请检查最新版本号
  google_maps_custom_marker: ^0.2.0  # 请检查最新版本号

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

接下来，创建一个Flutter页面来显示自定义标记的Google地图。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_custom_marker/google_maps_custom_marker.dart';

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

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

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

class _MapScreenState extends State<MapScreen> {
  final Completer<GoogleMapController> _controller = Completer();
  LatLng _initialCameraPosition = LatLng(-34, 151);
  BitmapDescriptor _customMarkerImage;

  @override
  void initState() {
    super.initState();
    _loadCustomMarkerImage();
  }

  Future<void> _loadCustomMarkerImage() async {
    final Uint8List markerImageBytes = await DefaultAssetBundle.of(context)
        .load('assets/custom_marker.png');  // 确保在assets文件夹中有custom_marker.png图片
    final BitmapDescriptor bitmap = BitmapDescriptor.fromBytes(markerImageBytes);
    setState(() {
      _customMarkerImage = bitmap;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Marker on Google Map'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: _initialCameraPosition,
          zoom: 10.0,
        ),
        markers: Set.from([
          Marker(
            markerId: MarkerId('custom_marker'),
            position: _initialCameraPosition,
            icon: _customMarkerImage ?? BitmapDescriptor.defaultMarker,
          ),
        ]),
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        customMarkers: Set.from([
          CustomMarker(
            markerId: MarkerId('custom_marker_info'),
            position: _initialCameraPosition,
            anchor: Anchor.top,
            rotation: 0.0,
            infoWindow: InfoWindow(
              title: 'Custom Marker',
              snippet: 'This is a custom marker',
            ),
            icon: CustomMarkerIcon(
              bitmap: _customMarkerImage ?? BitmapDescriptor.defaultMarker,
              size: Size(50, 50),  // 自定义标记的大小
            ),
          ),
        ]),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事情：

  1. 加载自定义标记图像：在initState方法中，我们使用_loadCustomMarkerImage函数从assets文件夹加载自定义标记图像。

  2. 设置Google Map：在build方法中，我们创建了一个GoogleMap小部件，并设置了初始相机位置、标记和自定义标记。

  3. 自定义标记：我们使用了CustomMarker类来创建自定义标记，并设置了它的位置、锚点、旋转角度、信息窗口和图标。

  4. 标记和信息窗口：我们使用Marker和CustomMarker来显示标记和相关信息窗口。

确保你在assets文件夹中有一个名为custom_marker.png的图像文件，并且已经在pubspec.yaml文件中声明了资产：

flutter:
  assets:
    - assets/custom_marker.png

这样，你就可以在你的Flutter应用中显示自定义标记的Google地图了。

回到顶部