Flutter：Google Maps 如何从 Firestore 设置图标

Posted 2023-05-06

【中文标题】Flutter：Google Maps 如何从 Firestore 设置图标

【英文标题】：Flutter: Google Maps how to set icon from Firestore

【发布时间】：2021-10-02 01:51:00

【问题描述】：

我有谷歌地图页面。在其中我展示了很多标记。我使用 FireStore 来存储标记数据，例如 latlng、标题和图标。 Latlng 和 Title 工作正常，我设法将我的标记从 Firestore 显示到我的应用程序中。现在我也想显示我的图标。图标节点存储为 Firebase 存储路径的访问令牌。在其中我有从谷歌字体下载的 .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);
        ,
      ),
    );
  

【问题讨论】：

Marker 有一个 icon 参数，可用于在创建标记时显示自定义图标。

【参考方案1】：

您可以通过指定Marker 类的icon 属性并为BitmapDescriptor 提供bytes from the image url 来设置图标。

查看以下代码：

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));

【讨论】：

我试过你的代码。它与这样的实际网址一起使用（image.pngaaa.com/210/1203210-middle.png）。但是当我尝试像这样解析url时（ Uint8List bytes = (await NetworkAssetBundle(Uri.parse(specify['icon'])).load(specify['icon'])).buffer.asUint8List(); ）和它没用。任何想法为什么？

我认为是因为链接指向 .svg。我将 .png 上传到 Firebase Storage，并为其中一个标记提供了访问令牌。还是什么都没有

发现问题，.svg 格式错误。我下载了 .png 版本的图标，一切正常。感谢您的帮助

很高兴听到这个消息！