flutter - Google Map Place Picker 包不显示选择的结果
问题描述
我正在使用google_maps_place_picker包,我有两个问题:
- 当我搜索位置时,我只看到“正在搜索”文本。
- 当我将图钉拖到某个位置时,我看到了一个白色背景框,但没有看到我选择的位置的描述。
请看截图。
这是我正在使用的代码:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_place_picker/google_maps_place_picker.dart';
class GoogleMapsPlacePicker extends StatelessWidget {
static const routeName = '/google-search-map';
// Light Theme
final ThemeData lightTheme = ThemeData.light().copyWith(
// Background color of the FloatingCard
cardColor: Colors.white,
buttonTheme: ButtonThemeData(
// Select here's button color
buttonColor: Colors.black,
textTheme: ButtonTextTheme.primary,
),
);
// Dark Theme
final ThemeData darkTheme = ThemeData.dark().copyWith(
// Background color of the FloatingCard
cardColor: Colors.grey,
buttonTheme: ButtonThemeData(
// Select here's button color
buttonColor: Colors.yellow,
textTheme: ButtonTextTheme.primary,
),
);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google Map Place Picker Demo',
theme: lightTheme,
darkTheme: darkTheme,
themeMode: ThemeMode.light,
home: HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key key}) : super(key: key);
static final kInitialPosition = LatLng(-33.8567844, 151.213108);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
PickResult selectedPlace;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Google Map Place Picer Demo"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("Load Google Map"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return PlacePicker(
apiKey: 'my_api_key',
initialPosition: HomePage.kInitialPosition,
useCurrentLocation: true,
selectInitialPosition: true,
//usePlaceDetailSearch: true,
onPlacePicked: (result) {
selectedPlace = result;
Navigator.of(context).pop();
setState(() {});
},
forceSearchOnZoomChanged: true,
automaticallyImplyAppBarLeading: false,
autocompleteLanguage: "en",
region: 'tz',
//selectInitialPosition: true,
selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
print("state: $state, isSearchBarFocused: $isSearchBarFocused");
return isSearchBarFocused
? Container()
: FloatingCard(
bottomPosition: 0.0, // MediaQuery.of(context) will cause rebuild. See MediaQuery document for the information.
leftPosition: 0.0,
rightPosition: 0.0,
width: 500,
borderRadius: BorderRadius.circular(12.0),
child: state == SearchingState.Searching
? Center(child: CircularProgressIndicator())
: RaisedButton(
child: Text("Pick Here"),
onPressed: () {
// IMPORTANT: You MUST manage selectedPlace data yourself as using this build will not invoke onPlacePicker as
// this will override default 'Select here' Button.
print("do something with [selectedPlace] data");
Navigator.of(context).pop();
},
),
);
},
pinBuilder: (context, state) {
if (state == PinState.Idle) {
return Icon(Icons.location_on_outlined);
} else {
return Icon(Icons.location_on_rounded);
}
},
);
},
),
);
},
),
selectedPlace == null ? Container() : Text(selectedPlace.formattedAddress ?? ""),
],
),
));
}
}
解决方案
您必须提供 api 密钥。此外,api 密钥必须有效。这意味着必须支持您的 api 密钥才能获取地图结果。
推荐阅读
- flutter - 如何像flutter app的appsee那样分析用户旅程?
- html - 如何将页脚保持在页面底部并以 html 和 css 为中心?
- python - 将数据从数据库移动到另一个时出错
- android - 迁移到 androidX 后出现多个构建错误
- python - 文件未同步保存
- openjdk-11 - 错误类型集合的方法 toarray() 未定义___
- python - 使用 PyOpenGL 在 Pygame 中渲染图像
- java - RecyclerView:没有附加适配器;跳过布局(没有 shw Slider 和照片 Picasso 和 Sliderbanner
- java - 如何在 Android 的 Java 库中添加资源(例如文本文件)
- django - Django request.user 在重定向后变为匿名。使用自定义用户模型和身份验证