如何创建一个简单的谷歌地图地址搜索，并在颤振中自动完成并获取纬度和经度? [英] How to create a simple google maps address search with autocomplete in flutter and get latitude and longitude?
问题描述
我是 Flutter 的新手，我正在尝试构建一个简单的谷歌地图应用程序.我已经在应用中实现了谷歌地图，并且运行良好.
但现在我想添加谷歌地图自动完成功能，但找不到专注于此的简单教程或示例.
我有一个 TextField，我想根据用户键入的内容在其下方显示地点和地址.
显示结果后，我需要获取它的纬度和经度以在地图上进行标记.下面的代码代表我的BottomSheet，它包含我的TexField，需要在一些书面文本之后实现它下面的一些列表.
void _settingModalBottomSheet(context) {double statusBarHeight = MediaQuery.of(context).padding.top;showModalBottomSheet(上下文:上下文，建造者:(建造者){返回容器(填充:EdgeInsets.only(顶部:statusBarHeight)，颜色:Colors.transparent，孩子:容器(高度:MediaQuery.of(context).size.height,装饰:BoxDecoration(颜色:Colors.blueAccent，边界半径:BorderRadius.only(topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),孩子:列(孩子们:<小部件>[填充(填充:const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),孩子:容器(高度:50.0，宽度:double.infinity，装饰:BoxDecoration(borderRadius: BorderRadius.circular(10.0),颜色: Colors.white),孩子:文本字段(textInputAction: TextInputAction.search,装饰:输入装饰(提示文本:Para onde vamos?",边框:InputBorder.none，contentPadding: EdgeInsets.only(left: 15.0, top: 15.0),后缀图标:图标按钮(图标:图标(Icons.search)，onPressed: searchAndNavigate,图标大小:30.0，)),onChanged: (val) {设置状态((){搜索地址 = val;});},提交时:(期限){searchAndNavigate();},),),),],)),);});}您可以使用
纬度:52.3679843液化天然气:4.9035614希望这能回答您的问题.
I'm new at Flutter and I'm trying to build a simple google maps app. I've already implemented google maps to the app and it is running perfect.
But now I want to add google maps autocomplete and I can't find a simple tutorial or example that is focused on it.
I have a TextField and I want to show places and addresses below it according to what the user types.
After showing the results, I need to get its latitude and longitude to mark on the map. The code below represents my BottomSheet, that contains my TexField and need to implement some list below it after some written text.
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();
},
),
),
),
],
)
),
);
}
);
}
You can use flutter_google_places plugin which shows the places in the autocomplete list as you type it and also returns lat and long of the place/address selected.
===== working code =======
- Add
flutter_google_placesplugin and import it in your dart file. - Add geo_coder plugin and import it in same dart file. (Required to access geocoding services)
- Generate google api key for your project.
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);
}
}
}
result:
When you tap on Find Address button, it opens new screen with built-in search app bar in which you can type address / place you are looking for which shows corresponding results in autocomplete list and prints lat and long of the place you selected.
lat: 52.3679843
lng: 4.9035614
Hope this answers your question.
这篇关于如何创建一个简单的谷歌地图地址搜索，并在颤振中自动完成并获取纬度和经度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
