Flutter：Google 映射如何从 Firestore 设置图标

Question

我有包含 Google 地图的页面。在其中我展示了很多标记。我使用 FireStore 来存储标记数据，例如经纬度、标题和图标。 Latlng 和 Title 工作正常，我设法将我的标记从 Firestore 显示到我的应用程序中。现在我也想显示我的图标。图标节点存储为 Firebase 存储路径的访问令牌。在其中我有从 Google 字体下载的 .svg 图标。现在，我如何将它们显示为 Google 地图标记图标？

这是我的代码：

class _LocationPageState extends State<LocationPage> {
  Completer<GoogleMapController> _controller = Completer();

  late BitmapDescriptor sourceIcon;
  late BitmapDescriptor destinationIcon;
  late LatLng currentLocation;
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

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

  static const _initialCameraPosition = CameraPosition(
    target: LatLng(43.24155902529146, 76.9519522293528),
    zoom: 17,
  );

  void initMarker(specify, specifyId) async {
    var markerIdVal = specifyId;
    final MarkerId markerId = MarkerId(markerIdVal);
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(specify['latlng'].latitude, specify['latlng'].longitude),
      infoWindow: InfoWindow(title: specify['title']),
    );
    setState(() {
      markers[markerId] = marker;
    });
  }

  getMarkerData() async {
    FirebaseFirestore.instance.collection('location').get().then((markerData) {
      if (markerData.docs.isNotEmpty) {
        for (int i = 0; i < markerData.docs.length; i++) {
          initMarker(markerData.docs[i].data(), markerData.docs[i].id);
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: MainTheme.lightTheme.primaryColor,
        automaticallyImplyLeading: true,
        title: Text('Локация',
            textAlign: TextAlign.center,
            style: MainTheme.lightTheme.textTheme.headline2),
        elevation: 4,
      ),
      body: GoogleMap(
        markers: Set<Marker>.of(markers.values),
        myLocationButtonEnabled: false,
        zoomControlsEnabled: false,
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
    );
  }
}

Answer 1

您可以通过指定 Marker class 的 icon 属性并提供 BitmapDescriptor 和来设置图标.

查看下面的代码：

Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imageUrl)).load(imageUrl)).buffer.asUint8List();

final Marker marker = Marker(
  markerId: markerId,
  position: LatLng(specify['latlng'].latitude, specify['latlng'].longitude),
  infoWindow: InfoWindow(title: specify['title']),
  icon: BitmapDescriptor.fromBytes(bytes));

Flutter：Google 映射如何从 Firestore 设置图标

Flutter: Google Maps how to set icon from Firestore

marker

dart

firebase

flutter

google-cloud-firestore