Flutter Google 地图弹出窗口“提供的 Api 密钥无效”

Question

我正在构建一个 Flutter 应用程序，并添加了一个屏幕来选择特定位置。这是该屏幕的代码：

class EventLocationPicker extends StatefulWidget {
  final String locationPlaceId;
  EventLocationPicker({required this.locationPlaceId});
  EventLocationPickerState createState() =>
      EventLocationPickerState(locationPlaceId: locationPlaceId);
}

class EventLocationPickerState extends State<EventLocationPicker> {
  String locationPlaceId;
  String originalLocationPlaceId;
  EventLocationPickerState({required this.locationPlaceId})
      : originalLocationPlaceId = locationPlaceId;

  final Completer<GoogleMapController> _controller = Completer();
  final GoogleGeocodingApi geoCoding =
      GoogleGeocodingApi(globals.GOOGLE_API_KEY);

  String locationAddress = "";
  String hintText = "Search for a location";
  LatLng startingPosition = LatLng(37.7749, -122.4194);
  Set<Marker> markers = {};

  Widget getFAB() {
    if (locationPlaceId != originalLocationPlaceId) {
      return FloatingActionButton(
          backgroundColor: Theme.of(context).primaryColor,
          child: Icon(Icons.check),
          onPressed: () {
            Navigator.pop(context,
                {"placeId": locationPlaceId, "address": locationAddress});
          });
    } else {
      return Container();
    }
  }

  Future<void> goToLocation(String placeId) async {
    locationPlaceId = placeId;
    final GoogleGeocodingResponse address =
        await geoCoding.placeGeocoding(placeId);
    final GoogleGeocodingLocation coordinates =
        address.results.first.geometry!.location;
    setState(() {
      locationPlaceId = placeId;
      locationAddress = address.results.first.formattedAddress;
      startingPosition = LatLng(coordinates.lat, coordinates.lng);
      markers.clear();
      markers.add(new Marker(
          markerId: MarkerId("eventLocation"),
          position: LatLng(coordinates.lat, coordinates.lng),
          infoWindow: InfoWindow(title: "Location", snippet: locationAddress)));
      hintText = locationAddress;
    });
  }

  Future<void> getPlaceById(String placeId) async {
    if (placeId != "") {
      return;
    }
    final GoogleGeocodingResponse response =
        await geoCoding.placeGeocoding(placeId);
    GoogleGeocodingResult result = response.results.first;
    locationPlaceId = result.placeId;
    locationAddress = result.formattedAddress;
    startingPosition = LatLng(
      result.geometry!.location.lat,
      result.geometry!.location.lng,
    );
    markers.clear();
    markers.add(new Marker(
      markerId: MarkerId("eventLocation"),
      position: LatLng(
        result.geometry!.location.lat,
        result.geometry!.location.lng,
      ),
      infoWindow: InfoWindow(
        title: "Location",
        snippet: locationAddress,
      ),
    ));
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: BackButton(),
          title: Text("Event Location"),
          backgroundColor: Theme.of(context).primaryColor,
        ),
        floatingActionButton: getFAB(),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        body: FutureBuilder(
            future: getPlaceById(locationPlaceId),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.connectionState != ConnectionState.done) {
                return Center(
                    child: CircularProgressIndicator(
                        color: Theme.of(context).primaryColor));
              } else {
                return Column(children: [
                  GooglePlaceAutoCompleteTextField(
                    isLatLngRequired: true,
                    googleAPIKey: globals.GOOGLE_API_KEY,
                    textEditingController: TextEditingController(),
                    debounceTime: 1000,
                    inputDecoration: InputDecoration(
                      hintText: hintText,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                    itemClick: (prediction) {
                      goToLocation(prediction.placeId!);
                    },
                  ),
                  Flexible(
                      child: GoogleMap(
                    zoomControlsEnabled: false,
                    markers: markers,
                    initialCameraPosition: CameraPosition(
                      target: startingPosition,
                      zoom: 14,
                    ),
                    onMapCreated: (GoogleMapController controller) {
                      if (!_controller.isCompleted) {
                        _controller.complete(controller);
                      }
                    },
                  ))
                ]);
              }
            }));
  }
}

有时，通过 GooglePlaceAutoCompleteTextField 选择位置后，屏幕底部会出现一个弹出窗口。这种情况有时会发生，但我找不到规律。

我试图查明正在发生的确切事情，但我仍然不确定。看起来它是地理编码 Api，因为我的云仪表板显示了一些错误的请求，但在我的代码中它不是 GoogleGeocodingApi.placeGeocoding。我调试了它，它总是返回一条状态为 OK 的消息，即使出现弹出窗口也是如此。

调试器控制台中也没有错误消息。说实话，我不知道该怎么办了，尤其是因为它只是有时会发生。

Answer 1

添加此参数为我解决了这个问题：

isLatLngRequired: false,