如何创建一个简单的谷歌地图地址搜索与自动完成flutter并获得经度和纬度?

问题描述 投票:0回答:1

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

但现在我想添加谷歌地图自动完成,我找不到一个简单的教程或专注于它的例子。

我有一个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();
                      },
                    ),
                  ),
                ),
              ],
            )
          ),
        );
      }
    );
  }

Current screen

search flutter autocomplete maps googleplacesautocomplete
1个回答
3
投票

您可以使用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);
    }
  }
}

结果:

当您点击“查找地址”按钮时,它会打开带有内置搜索应用栏的新屏幕,您可以在其中键入要查找的地址/地点,在自动填充列表中显示相应的结果,并打印所选地点的latlong

enter image description here

lat: 52.3679843
lng: 4.9035614

希望这能回答你的问题。

© www.soinside.com 2019 - 2024. All rights reserved.