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

Question

我是 Flutter 的新手，我正在尝试构建一个简单的 google 地图应用。我已经实现了应用程序的 google 映射，它是运行完美的。

但现在我想添加 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 插件，它会在您键入时显示自动完成列表中的位置，以及 returns 所选 place/address 的纬度和经度。

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

添加 flutter_google_places 插件并将其导入到您的 dart 文件中。
添加 geo_coder 插件并将其导入同一个 dart 文件。（需要访问地理编码服务）
为您的项目生成 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

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

How to create a simple google maps address search with autocomplete in flutter and get latitude and longitude?

maps

search

autocomplete

flutter

googleplacesautocomplete