Flutter谷歌地图自定义标记内添加数字的代码修改方法咨询

解决方案 #

你当前使用的CustomMarkerIcon.fromIcon()方法仅支持生成纯图标样式的标记，要实现带数字的自定义标记，改用该库提供的CustomMarkerIcon.fromWidget()方法即可，该方法可以将任意Flutter Widget直接转换为谷歌地图可用的标记图标，修改方案如下：

修改_addMarkers方法逻辑 #

将原来生成纯蓝色圆形图标的逻辑替换为自定义带数字的圆形Widget，完整修改后的代码如下：

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

class FlutterAnimarkerExample extends StatefulWidget {
  @override
  _FlutterAnimarkerExampleState createState() => _FlutterAnimarkerExampleState();
}

class _FlutterAnimarkerExampleState extends State<FlutterAnimarkerExample> {
  final LatLng _latLng = LatLng(28.7041, 77.1025);
  final double _zoom = 15.0;
  Set<Marker> _markers = {};

  void _addMarkers() async {
    // 自定义带数字的圆形标记Widget
    Widget customMarkerWidget = Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
        // 可选配置：添加白色边框增强辨识度
        border: Border.all(color: Colors.white, width: 2),
      ),
      child: const Center(
        child: Text(
          "5", // 此处可替换为动态业务数字变量
          style: TextStyle(
            color: Colors.white,
            fontSize: 32,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );

    // 将Widget转换为谷歌地图可用的BitmapDescriptor
    BitmapDescriptor markerIcon = await CustomMarkerIcon.fromWidget(
      customMarkerWidget,
      context: context,
    );

    setState(() {
      _markers.add(
        Marker(
          markerId: const MarkerId("marker_id"),
          position: _latLng,
          icon: markerIcon,
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Marker Icon Example'),
        backgroundColor: Colors.red,
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          _addMarkers();
        },
        markers: _markers,
        initialCameraPosition: CameraPosition(
          target: _latLng,
          zoom: _zoom,
        ),
      ),
    );
  }
}

可自定义调整项 #

• 修改Container的width/height参数可以调整标记整体尺寸
• 修改Text组件的字符串内容即可替换展示的数字，支持动态绑定业务变量
• 调整BoxDecoration的颜色、阴影、圆角参数可以自定义标记外观
• 修改Text的style参数可以调整数字的大小、颜色、粗细效果

内容的提问来源于stack exchange，提问作者Omor Faruqe