flutter 自定义信息窗口不会弹出

hlswsv35  于 2023-01-14  发布在  Flutter
关注(0)|答案(1)|浏览(160)

我正在https://medium.com/flutter-community/add-a-custom-info-window-to-your-google-map-pins-in-flutter-2e96fdca211a中试用本教程,为公交车应用程序的Map中的每个标记创建自定义信息窗口。但我无法使信息窗口正常工作。我找不到问题所在。我想使信息窗口更改为Map中放置的特定标记,并显示公交车到达时间。
这是我希望定制信息窗口在屏幕上显示的方式,带有公交车站的信息(公交车站名称和纬度和经度)

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class PinInformation {
  LatLng location;
  String locationName;
  Color labelColor;

  PinInformation({
    required this.location,
    required this.locationName,
    required this.labelColor,
  });
}

void main() => runApp(const NearbyBus());

class NearbyBus extends StatefulWidget {
  const NearbyBus({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return NearbyBusStopScreen();
  }
}

class NearbyBusStopScreen extends State<NearbyBus> {
  final Completer<GoogleMapController> _controller =
      Completer<GoogleMapController>();

  static const _initialCameraPosition =
      CameraPosition(target: LatLng(1.3321, 103.7743), zoom: 19);

  double pinPillPosition = -100;
  PinInformation currentlySelectedPin = PinInformation(
    location: const LatLng(0, 0),
    locationName: '',
    labelColor: Colors.grey,
  );

  late PinInformation busStopInfo; //hold values of the bus stop

  String stopName = '';

  @override
  void initState() {
    super.initState();
    markerspin();
  }

  List<Marker> markerspin() {
    final List<Marker> _markers = <Marker>[
      Marker(
          markerId: const MarkerId('Block 1'),
          position: const LatLng(1.3333, 103.7769), //Block 1 coordinates
          infoWindow: const InfoWindow(title: 'Block 1'),
          onTap: () {
            setState(() {
              currentlySelectedPin = busStopInfo;
              pinPillPosition = 0;

              busStopInfo = PinInformation(
                  location: const LatLng(1.3333, 103.7769),
                  locationName: "Block 1",
                  labelColor: Colors.black);
            });
          }),
      const Marker(
        markerId: MarkerId('Block 51'),
        position: LatLng(1.3321, 103.7744), //Block 51 coordinates
        infoWindow: InfoWindow(
          title: 'Block 51',
        ),
      ),
      Marker(
        markerId: const MarkerId('Block 35'),
        position: const LatLng(1.33299, 103.77361), //Block 72 coordinates
        infoWindow: InfoWindow(title: 'Block 35', onTap: () {}),
      ),
      const Marker(
        markerId: MarkerId('Block 22'),
        position: LatLng(1.3342, 103.7755), //Block 22 coordinates
        infoWindow: InfoWindow(
          title: 'Block 22',
        ),
      ),
      const Marker(
        markerId: MarkerId('Convention Centre'),
        position: LatLng(1.33235, 103.77563), //Convention Centre coordinates
        infoWindow: InfoWindow(
          title: 'Convention Centre',
        ),
      ),
      const Marker(
        markerId: MarkerId('Block 83'),
        position: LatLng(1.330597, 103.774935), //Block 83 coordinates
        infoWindow: InfoWindow(
          title: 'Block 83',
        ),
      ),
    ];
    return _markers;
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text("Nearby Bus Stops"),
          backgroundColor: Colors.red,
        ),
        body: Builder(builder: (context) {
          return Stack(
            children: <Widget>[
              GoogleMap(
                mapType: MapType.hybrid,
                initialCameraPosition: _initialCameraPosition,
                markers: Set<Marker>.of(markerspin()),
                onMapCreated: (GoogleMapController controller) {
                  _controller.complete(controller);
                },
                onTap: (LatLng location) {
                  setState(() {
                    pinPillPosition = 0;
                  });
                },
              ),
              AnimatedPositioned(
                  bottom: pinPillPosition,
                  right: 0,
                  left: 0,
                  duration: const Duration(milliseconds: 200),
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      margin: const EdgeInsets.all(30),
                      height: 50,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: const BorderRadius.all(
                            Radius.circular(50),
                          ),
                          boxShadow: <BoxShadow>[
                            BoxShadow(
                                blurRadius: 20,
                                offset: Offset.zero,
                                color: Colors.grey.withOpacity(1))
                          ]),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            margin: const EdgeInsets.only(left: 10),
                            width: 50,
                            height: 50,
                            child: const Icon(
                              Icons.directions_bus_sharp,
                              color: Colors.grey,
                            ),
                          ),
                          Expanded(
                              child: Container(
                            margin: const EdgeInsets.only(left: 20),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  currentlySelectedPin.locationName,
                                  style: TextStyle(
                                      color: currentlySelectedPin.labelColor),
                                ),
                                Text(
                                  currentlySelectedPin.location.latitude
                                      .toString(),
                                ),
                              ],
                            ),
                          )),
                        ],
                      ),
                    ),
                  ))
            ],
          );
        }));
  }
}
jv4diomz

jv4diomz1#

你可以使用下面的代码来显示你的标记图标在总线

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

之后,你可以设置一个图像如下所示

Marker(
    markerId: 'ABC,
    icon: BitmapDescriptor.fromBytes(redmarkerIcon!) 
    );

如果需要帮助请告诉我。
先谢了

相关问题