Search 如何创建一个简单的谷歌地图地址搜索与自动完成在颤振和获得纬度和经度？

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

但现在我想添加谷歌地图自动完成，我找不到一个简单的教程或例子，重点是它

我有一个文本字段，我想根据用户类型在下面显示位置和地址

在显示结果之后，我需要得到它的纬度和经度，以便在地图上标出。下面的代码代表了我的底稿，其中包含我的TexField，需要在一些书面文本之后实现它下面的一些列表

void\u设置ModalBottomSheet（上下文）{
double statusBarHeight=MediaQuery.of（context）.padding.top；
showModalBottomSheet(
上下文：上下文，
建筑商：（建筑商）{
返回容器(
填充：仅限边设置（顶部：statusBarHeight），
颜色：颜色。透明，
子：容器(
高度：MediaQuery.of（context）.size.height，
装饰：盒子装饰(
颜色：Colors.blueAccent，
borderRadius：仅限borderRadius(
左上：常数半径。圆形（10.0），右上：常数半径。圆形（10.0）），
子：列(
儿童：[
填充物(
填充：仅限常量边集（顶部：8.0，左侧：8.0，右侧：8.0），
子：容器(
身高：50.0，
宽度：double.infinity，
装饰：盒子装饰(
边界半径：边界半径。圆形（10.0），
颜色：颜色。白色
),
孩子：TextField(
textInputAction:textInputAction.search，
装饰：输入装饰(
hintText:“是否需要使用vamos？”，
边框：InputBorder.none，
contentPadding:仅限边集（左：15.0，顶：15.0），
后缀：图标按钮(
图标：图标（Icons.search），
按下：搜索和导航，
iconSize:30.0，
)
),
一旦更改：（val）{
设置状态（）{
searchAddr=val；
}
);
},
提交：（任期）{
searchAndNavigate（）；
},
),
),
),
],
)
),
);
}
);
}

您可以使用插件，该插件在键入时显示自动完成列表中的位置，并返回所选位置/地址的lat和long

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

添加

flatter\u google\u places

插件并将其导入dart文件

添加插件并将其导入同一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);
    }
  }
}

---

希望这能回答您的问题。

如果您有兴趣了解如何执行此操作，以便places api可以将数据返回到自定义列表视图中，此视频将向您展示我如何使用工作代码示例更新我的答案。希望这能回答您的问题。@DK15您能出示导入声明吗，因为我导入

flatter_google_places

as

import'软件包：flatter_google_places/flatter_google_places.dart'我得到了
GoogleMapsPlaces
作为未定义类的错误。@sainu
import'package:google\u maps\u webservice/places.dart'结束了如何在不打开另一个屏幕的情况下实现？导入“包：flatter_google_places/flatter_google_places.dart”；导入“包：google_maps_webservice/places.dart”；
lat: 52.3679843
lng: 4.9035614