Flutter Google Map 被选中时会增加标记图标的大小

Posted 2023-02-18

【中文标题】Flutter Google Map 被选中时会增加标记图标的大小

【英文标题】：Flutter Google Map increase marker icon size when being selected

【发布时间】：2021-09-02 11:27:09

【问题描述】：

有什么办法可以增加地图中标记被选中时的图标大小吗？

我尝试将List<BitmapDescriptor> 放在它由两个bitmapDescriptor 组成的位置，这样如果我需要显示图标的小/大版本，我可以轻松调用位图

bitmapDescriptor[0] // small
bitmapDescriptor[1] // big

但我认为 setState 在标记中不起作用，这就是它不更新图标的原因。

代码：

      Marker(
        markerId: MarkerId(lBusLoc[index].businessID.toString()),
        position: LatLng(lBusLoc[index].latitude, lBusLoc[index].longitude),
        infoWindow: InfoWindow(title: '', snippet: '$bus.busName'),
        icon: selectedBusId == bus.busId //condition
            ? bitmapDescriptor[1] //big
            : bitmapDescriptor[0], //small
        onTap: ()  
         
          setState(() 
            selectedBusId = bus.busId;       
          );
        ,
      ),

有没有更好的办法？

【参考方案1】：

您遇到的问题是 Marker 不是有状态小部件，因此 setState 无法使用它。事实上，它根本不是一个 Widget（它是一个 MapObject），所以它没有构建器方法。

每当您点击一个标记时，您都需要将您的Markers 列表替换为一个新列表，然后使用setState 重建GoogleMap 小部件（这是一个有状态小部件），使用您的新列表标记。

下面的代码 sn-p 显示一组蓝色图标标记。当您点击一个时，它会重建所有标记，将所选引脚的BitmapDescriptor 设置为绿色图标（您可以用大/小BitmapDescriptors 替换绿色/蓝色图标）

希望这可以帮助您解决问题

final greenPin =
    BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen);
final bluePin = BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue);

class MyMapPage extends StatefulWidget 
  MyMapPage();

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


class _MyMapPageState extends State<MyMapPage> 
  var pinList = [
    MarkerDetails(1, LatLng(52, 1), bigIcon: greenPin, smallIcon: bluePin),
    MarkerDetails(2, LatLng(52, 1.1), bigIcon: greenPin, smallIcon: bluePin),
    MarkerDetails(3, LatLng(52, 1.2), bigIcon: greenPin, smallIcon: bluePin),
    MarkerDetails(4, LatLng(52, 1.3), bigIcon: greenPin, smallIcon: bluePin),
  ];
  var markerList;

  @override
  void initState() 
    super.initState();
    markerList = _generateMarkerList(pinList, 0);
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: GoogleMap(
        myLocationEnabled: true,
        myLocationButtonEnabled: false,
        markers: Set.from(markerList),
        initialCameraPosition:
            CameraPosition(target: pinList[0].position, zoom: 9),
      ),
    );
  

  List<Marker> _generateMarkerList(
      List<MarkerDetails> detailsList, int selectedKey) 
    return detailsList
        .map((place) => Marker(
              position:
                  LatLng(place.position.latitude, place.position.longitude),
              markerId: MarkerId(place.key.toString()),
              infoWindow: InfoWindow(
                  title: place.key.toString(), snippet: place.toString()),
              onTap: () => setState(() =>
                  markerList = _generateMarkerList(detailsList, place.key)),
              icon: selectedKey == place.key ? place.bigIcon : place.smallIcon,
            ))
        .toList();
  


class MarkerDetails 
  final int key;
  final LatLng position;
  final BitmapDescriptor bigIcon;
  final BitmapDescriptor smallIcon;
  MarkerDetails(this.key, this.position,
      @required this.bigIcon, @required this.smallIcon);