Flutter Google 地图选中时增加标记图标大小

Question

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

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

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

有没有更好的方法？

Answer 1

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

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

下面的代码片段显示了一组蓝色图标标记。当您点击一个时，它会重建所有标记，将所选图钉的 BitmapDescriptor 设置为绿色图标（您只需将 green/blue 图标替换为 large/small 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});
}

Flutter Google 地图选中时增加标记图标大小

Flutter Google Map increase marker icon size when being selected

flutter

google-maps

dart

google-maps-markers

google-maps-flutter