Flutter 中的地图标记：自定义 Marker 图标

Flutter 中的地图标记：自定义 Marker 图标

5 回复

使用 BitmapDescriptor 自定义图标，如 BitmapDescriptor.fromAsset()。

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


在 Flutter 中使用 google_maps_flutter 包，可以通过 BitmapDescriptor 自定义 Marker 图标。示例：BitmapDescriptor.fromAssetImage 加载本地图片。

在 Flutter 中，你可以使用 google_maps_flutter 包来自定义地图标记的图标。首先，通过 BitmapDescriptor 类加载自定义图标，然后将其应用到 Marker 的 icon 属性上。例如：

final BitmapDescriptor customIcon = await BitmapDescriptor.fromAssetImage(
  ImageConfiguration(size: Size(48, 48)),
  'assets/custom_marker.png',
);

Marker(
  markerId: MarkerId('custom_marker'),
  position: LatLng(37.42796133580664, -122.085749655962),
  icon: customIcon,
);

这样，你就可以在地图上显示自定义标记图标了。

使用 BitmapDescriptor 从资源或网络加载自定义图标。

在 Flutter 中，你可以使用 google_maps_flutter 插件来显示地图并添加自定义的 Marker 图标。以下是如何实现自定义 Marker 图标的步骤：

  1. 添加依赖：首先，在 pubspec.yaml 文件中添加 google_maps_flutter 依赖。
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1

  1. 获取 API 密钥：确保你已经在 Google Cloud Console 中启用了 Google Maps SDK，并获取了 API 密钥。

  2. 初始化地图：在你的 Flutter 应用中初始化地图。

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

class MyMap extends StatefulWidget {
  @override
  _MyMapState createState() => _MyMapState();
}

class _MyMapState extends State<MyMap> {
  GoogleMapController? mapController;

  final LatLng _center = const LatLng(37.7749, -122.4194);

  Set<Marker> _markers = {};

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

  void _addMarker() async {
    // 加载自定义图标
    final BitmapDescriptor customIcon = await BitmapDescriptor.fromAssetImage(
      ImageConfiguration(devicePixelRatio: 2.5),
      'assets/custom_marker.png', // 你的图标路径
    );

    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId('custom_marker'),
          position: _center,
          icon: customIcon,
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Marker Icon'),
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
        markers: _markers,
      ),
    );
  }
}
  1. 添加自定义图标：将你的自定义图标文件（例如 custom_marker.png）放在 assets 文件夹中，并在 pubspec.yaml 文件中声明。
flutter:
  assets:
    - assets/custom_marker.png
  1. 运行应用：现在，当你运行应用时，地图上会显示一个带有自定义图标的 Marker。

通过以上步骤，你可以在 Flutter 中使用 google_maps_flutter 插件轻松地添加自定义 Marker 图标。

回到顶部