Flutter 多自定义图标未显示在地图视图上

Posted 2023-03-28

【中文标题】Flutter 多自定义图标未显示在地图视图上

【英文标题】：Flutter multi custom icons are not showed on the map view

【发布时间】：2021-12-18 04:14:05

【问题描述】：

我试图在地图视图上显示多个自定义图标，并尝试处理图标大小（ios 案例）。我编写的代码似乎适用于第一个自定义图标（我有 3 个），但是当我添加代码以将其他两个自定义图标添加到标记列表时，地图不再显示任何自定义图标。 这是我的代码：

class mapPage extends StatefulWidget 
  static const String routeName = '/mapPage';

  @override
  _mapPage createState() => _mapPage();


class _mapPage extends State<mapPage> 
  LatLng _initialcameraposition = LatLng(40.679425, 14.755968);
  GoogleMapController _mapController;
  String _mapStyle;
  List<Marker> _markers = <Marker>[];

  final Set<Marker> listMarkers = ;

  @override
  void initState() 
    super.initState();
    setCustomMarkers();
    rootBundle.loadString('assets/mapStyle.txt').then((string) 
      _mapStyle = string;
    );
  

  _onMapCreated(GoogleMapController controller) 
    if (mounted)
      setState(() 
        _mapController = controller;
        _mapController.setMapStyle(_mapStyle);
      );
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).translate('explore')),
      ),
      drawer: navigationDrawer(),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: new FutureBuilder(
            future: DefaultAssetBundle.of(context)
                .loadString('assets/turisticpoint.json'),
            builder: (context, snapshot) 
              var string = snapshot.data.toString();
              List<CustomAdapter> turisticPointList = parseJosn(string);

              if (turisticPointList.isNotEmpty) 
                for (int i = 0; i < turisticPointList.length; i++) 
                  _markers.add(Marker(
                      markerId: MarkerId('SomeId'),
                      position: LatLng(
                          double.parse(turisticPointList[i].latitudine),
                          double.parse(turisticPointList[i].longitudine)),
                      infoWindow: InfoWindow(
                        title: AppLocalizations.of(context)
                            .translate(turisticPointList[i].titolo),
                      )));
                


              

              return turisticPointList.isNotEmpty
                  ? new GoogleMap(
                      initialCameraPosition: CameraPosition(
                          target: _initialcameraposition, zoom: 15),
                      mapType: MapType.normal,
                      markers: Set<Marker>.of(_markers),
                      onMapCreated: _onMapCreated,
                      myLocationEnabled: true,
                    )
                  : new Center(child: new CircularProgressIndicator());
            ),
      ),
    );
  

  Future<Uint8List> getBytesFromAsset(String path, int width) async 
    ByteData data = await rootBundle.load(path);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
        targetWidth: width);
    ui.FrameInfo fi = await codec.getNextFrame();
    return (await fi.image.toByteData(format: ui.ImageByteFormat.png))
        .buffer
        .asUint8List();
  

  void setCustomMarkers() async 
    BitmapDescriptor portIcon, busIcon, trainIcon;

    final Uint8List markerIconPort = await getBytesFromAsset('assets/images/port.png', 100);
    //final Uint8List markerIconTrain = await getBytesFromAsset('assets/images/train.png', 100);
    //final Uint8List markerIconBus = await getBytesFromAsset('assets/images/train.png', 100);


    portIcon = BitmapDescriptor.fromBytes(markerIconPort);
    //trainIcon = BitmapDescriptor.fromBytes(markerIconTrain);
    //busIcon = BitmapDescriptor.fromBytes(markerIconTrain);

    //port
    _markers.add(Marker(
      markerId: MarkerId('SomeId'),
      position: LatLng(40.672842, 14.769194),
      infoWindow: InfoWindow(title: "Port 1"),
      icon: portIcon,
    ));

    _markers.add(Marker(
      markerId: MarkerId('SomeId'),
      position: LatLng(40.674126, 14.752421),
      infoWindow: InfoWindow(title: "Port 2"),
      icon: portIcon,
    ));

    //train
    _markers.add(Marker(
      markerId: MarkerId('SomeId'),
      position: LatLng(40.675804, 14.772802),
      infoWindow: InfoWindow(title: "Train"),
      icon: trainIcon,
    ));

    //bus
     _markers.add(Marker(
      markerId: MarkerId('SomeId'),
      position: LatLng(40.674102, 14.776989),
      infoWindow: InfoWindow(
        title: "Bus",
      ),
      icon: busIcon,
    ));
  

  Future<String> loadAsset(BuildContext context) async 
    return await DefaultAssetBundle.of(context)
        .loadString('assets/turisticpoint.json');
  

  List<CustomAdapter> parseJosn(String response) 
    if (response == null) 
      return [];
    
    var decode = json.decode(response.toString());
    if (decode == null) 
      return [];
    

    final parsed = decode.cast<Map<String, dynamic>>();
    return parsed
        .map<CustomAdapter>((json) => new CustomAdapter.fromJson(json))
        .toList();
  

如何解决我的问题？

如果我在代码中犯了一些奇怪或愚蠢的错误，希望你能原谅我，我真的是 Flutter 世界的新手。

【参考方案1】：

要正确加载自定义标记，您需要使用BitmapDescriptor，如下所示：

注意：我使用的是随机图标，但您可以通过更改BitmapDescriptor 中的路径文件来使用自定义图标。

void setCustomMarkers() async 
  var portIcon, busIcon, trainIcon;

  portIcon = await BitmapDescriptor.fromAssetImage(
    ImageConfiguration(), "images/cool.png");
  busIcon = await BitmapDescriptor.fromAssetImage(
    ImageConfiguration(), "images/monkey.png");
  trainIcon = await BitmapDescriptor.fromAssetImage(
    ImageConfiguration(), "images/smile.png");

  //port
  _markers.add(Marker(
    markerId: MarkerId('1'),
    position: LatLng(40.672842, 14.769194),
    infoWindow: InfoWindow(title: "Port 1"),
    icon: portIcon,
  ));

_markers.add(Marker(
  markerId: MarkerId('2'),
  position: LatLng(40.674126, 14.752421),
  infoWindow: InfoWindow(title: "Port 2"),
  icon: portIcon,
));

//train
_markers.add(Marker(
  markerId: MarkerId('3'),
  position: LatLng(40.675804, 14.772802),
  infoWindow: InfoWindow(title: "Train"),
  icon: trainIcon,
));

//bus
_markers.add(Marker(
  markerId: MarkerId('4'),
  position: LatLng(40.674102, 14.776989),
  infoWindow: InfoWindow(title: "Bus"),
  icon: busIcon,
));