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

【问题标题】：Flutter Google Map increase marker icon size when being selectedFlutter Google Map 被选中时会增加标记图标的大小
【发布时间】：2023-04-02 09:04:01
【问题描述】：

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

我尝试将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;       
          });
        },
      ),

有没有更好的办法？

【问题讨论】：

标签： flutter google-maps dart google-maps-markers google-maps-flutter

【解决方案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});
}

【讨论】：