如何在flutter中创建具有自动完成功能的简单Google地图地址搜索并获取经度和纬度？

Question

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

但是，现在我想添加自动完成的Google地图，但找不到适合它的简单教程或示例。

我有一个TextField，我想根据用户输入的内容在其下方显示位置和地址。

显示结果后，我需要获取其纬度和经度以在地图上进行标记。下面的代码代表我的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();
                      },
                    ),
                  ),
                ),
              ],
            )
          ),
        );
      }
    );
  }

Answer 1

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

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

1. 添加flutter_google_places插件并将其导入您的dart文件中。
2. 添加geo_coder插件并将其导入相同的dart文件中。（需要使用地理编码服务）
3. 为您的项目生成Google API密钥。

main.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);
    }
  }
}

结果：

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

lat: 52.3679843
lng: 4.9035614

希望这能回答您的问题。