如何创建一个简单的谷歌地图地址搜索并在flutter中自动完成并获取纬度和经度？

我是 Flutter 的新手，我正在尝试构建一个简单的谷歌地图应用程序。我已经在应用程序中实现了谷歌地图，并且运行完美。

但现在我想添加谷歌地图自动完成功能，但我找不到专注于它的简单教程或示例。

我有一个文本字段，我想根据用户输入的内容显示其下方的地点和地址。

显示结果后，我需要获取其纬度和经度以在地图上标记。下面的代码代表我的 BottomSheet，其中包含我的 TexField，并且需要在一些书面文本之后在其下面实现一些列表。

void _settingModalBottomSheet(context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;

    showModalBottomSheet(
      context: context,
      builder: (builder) {
        return Container(
          padding: EdgeInsets.only(top: statusBarHeight),
          color: Colors.transparent,
          child: Container(
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
                    child: Container(
                      height: 50.0,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: Colors.white
                      ),
                      child: TextField(
                        textInputAction: TextInputAction.search,
                        decoration: InputDecoration(
                          hintText: "Para onde vamos?",
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.only(left: 15.0, top: 15.0),
                          suffixIcon: IconButton(
                            icon: Icon(Icons.search),
                            onPressed: searchAndNavigate,
                            iconSize: 30.0,
                          )
                        ),
                        onChanged: (val) {
                          setState(() {
                            searchAddr = val;
                          }
                        );
                      },
                      onSubmitted: (term) {
                        searchAndNavigate();
                      },
                    ),
                  ),
                ),
              ],
            )
          ),
        );
      }
    );
  }

您可以使用flutter_google_places https://pub.dartlang.org/packages/flutter_google_places插件，它会在您键入时显示自动完成列表中的地点，并返回所选地点/地址的纬度和经度。

=====工作代码=======

1. Add flutter_google_places插件并将其导入到您的 dart 文件中。
2. Add 地理编码器 https://pub.dartlang.org/packages/geocoder插件并将其导入到同一个 dart 文件中。 （需要访问地理编码服务）
3. 为您的项目生成 google api 密钥。

主要.dart：

void main() => runApp(MyApp());

const kGoogleApiKey = "Api_key";

GoogleMapsPlaces _places = GoogleMapsPlaces(apiKey: kGoogleApiKey);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: demo(),
      ),
    );
  }
}

class demo extends StatefulWidget {
  @override
  demoState createState() => new demoState();
}

class demoState extends State<demo> {
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: RaisedButton(
          onPressed: () async {
            // show input autocomplete with selected mode
            // then get the Prediction selected
            Prediction p = await PlacesAutocomplete.show(
                context: context, apiKey: kGoogleApiKey);
            displayPrediction(p);
          },
          child: Text('Find address'),

        )
      )
    );
  }

  Future<Null> displayPrediction(Prediction p) async {
    if (p != null) {
      PlacesDetailsResponse detail =
      await _places.getDetailsByPlaceId(p.placeId);

      var placeId = p.placeId;
      double lat = detail.result.geometry.location.lat;
      double lng = detail.result.geometry.location.lng;

      var address = await Geocoder.local.findAddressesFromQuery(p.description);

      print(lat);
      print(lng);
    }
  }
}

Result:

当您点击“查找地址”按钮时，它会打开带有内置搜索应用程序栏的新屏幕，您可以在其中键入您要查找的地址/地点，该屏幕会在自动完成列表中显示相应的结果并打印lat and long您选择的地点。

lat: 52.3679843
lng: 4.9035614