Flutter高德地图搜索功能插件amap_flutter_search的使用
前述
- 高德搜索Flutter插件
- 登录高德开放平台官网分别申请Android端和iOS端的key
- 如需了解高德搜索原生SDK的相关功能,请参阅Android搜索SDK开发指南和iOS搜索SDK开发指南
使用高德搜索Flutter插件
请参考在Flutter里使用Packages,引入amap_flutter_search
插件。
安卓端配置
需要将keystore文件添加到项目中,并在build.gradle
中添加签名。例如:
signingConfigs {
debug {
storeFile file("xxx") // keystore路径
storePassword 'xx'
keyAlias 'xx'
keyPassword 'xx'
}
release {
storeFile file("xx") // keystore路径
storePassword 'xx'
keyAlias 'xx'
keyPassword 'xx'
}
}
在需要的搜索功能的页面中引入搜索Flutter插件的dart类
import 'package:amap_flutter_search/amap_flutter_search.dart';
接口说明
设置Android和iOS的apikey
/// 设置Android和iOS的apikey,建议在widget初始化时设置<br>
/// apiKey的申请请参考高德开放平台官网<br>
/// Android端: https://lbs.amap.com/api/android-location-sdk/guide/create-project/get-key<br>
/// iOS端: https://lbs.amap.com/api/ios-location-sdk/guide/create-project/get-key<br>
/// [androidKey] Android平台的key<br>
/// [iosKey] ios平台的key<br>
static void setApiKey(String androidKey, String iosKey)
示例:
AmapFlutterSearch.setApiKey(
'3b4acde13d0603ecbea0b74781eafaf3', // Android API Key
'df6898859be82405b9b41d8d1f1e86d3' // iOS API Key
);
隐私设置
/// 设置是否已经包含高德隐私政策并弹窗展示显示用户查看,如果未包含或者没有弹窗展示,高德定位SDK将不会工作<br>
/// 高德SDK合规使用方案请参考官网地址:https://lbs.amap.com/news/sdkhgsy<br>
/// 必须保证在调用定位功能之前调用,建议首次启动App时弹出《隐私政策》并取得用户同意<br>
/// [hasContains] 隐私声明中是否包含高德隐私政策说明<br>
/// [hasShow] 隐私权政策是否弹窗展示告知用户<br>
static void updatePrivacyShow(bool hasContains, bool hasShow)
/// 设置是否已经取得用户同意,如果未取得用户同意,高德定位SDK将不会工作<br>
/// 高德SDK合规使用方案请参考官网地址:https://lbs.amap.com/news/sdkhgsy<br>
/// 必须保证在调用定位功能之前调用, 建议首次启动App时弹出《隐私政策》并取得用户同意<br>
/// [hasAgree] 隐私权政策是否已经取得用户同意<br>
static void updatePrivacyAgree(bool hasAgree)
示例:
AmapFlutterSearch.updatePrivacyShow(true, true); // 显示隐私政策
AmapFlutterSearch.updatePrivacyAgree(true); // 用户已同意隐私政策
关键字搜索
/// 关键字搜索poi<br>
/// 在城市[city]搜索关键字[keyword]的poi, 可以设置每页数量[pageSize](1-50)和第[page](1-100)页<br>
static Future<List<AMapPoi>> searchKeyword(
String keyword, {
String city = '',
String types = '',
int pageSize = 20,
int page = 1,
})
示例:
List<AMapPoi> dataList = [];
Future<void> search() async {
dataList = await AmapFlutterSearch.searchKeyword(
textEditingController.text, // 搜索关键词
city: "广州", // 搜索的城市
);
setState(() {}); // 更新UI
}
周边搜索poi
/// 周边搜索poi<br>
/// 在中心点[center]周边搜索关键字[keyword]和城市[city]的poi, 可以设置每页数量[pageSize](1-50)和第[page](1-100)页<br>
static Future<List<AMapPoi>> searchAround(
Location center, {
String keyword,
String city,
int pageSize,
int page,
int radius,
})
示例:
List<AMapPoi> dataList = [];
Future<void> searchAround() async {
dataList = await AmapFlutterSearch.searchAround(
Location(latitude: 23.110081, longitude: 113.401344), // 中心点位置
keyword: textEditingController.text, // 搜索关键词
);
setState(() {}); // 更新UI
}
完整示例代码
import 'package:amap_flutter_search/amap_flutter_search.dart';
import 'package:flutter/material.dart';
import 'dart:async';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _platformVersion = 'Unknown';
List<AMapPoi> dataList = [];
late TextEditingController textEditingController;
[@override](/user/override)
void initState() {
super.initState();
textEditingController = TextEditingController();
initPlatformState();
}
// 初始化平台状态
Future<void> initPlatformState() async {
String platformVersion;
try {
platformVersion =
await AmapFlutterSearch.platformVersion ?? 'Unknown platform version';
} on PlatformException {
platformVersion = 'Failed to get platform version.';
}
if (!mounted) return;
setState(() {
_platformVersion = platformVersion;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('高德地图搜索插件示例'),
actions: [
IconButton(
onPressed: () {
AmapFlutterSearch.setApiKey(
'3b4acde13d0603ecbea0b74781eafaf3',
'df6898859be82405b9b41d8d1f1e86d3');
AmapFlutterSearch.updatePrivacyAgree(true);
AmapFlutterSearch.updatePrivacyShow(true, true);
},
icon: const Icon(Icons.login)),
],
),
body: Column(
children: [
// 注册API Key按钮
TextButton.icon(
onPressed: () {
AmapFlutterSearch.setApiKey(
'3b4acde13d0603ecbea0b74781eafaf3',
'df6898859be82405b9b41d8d1f1e86d3');
AmapFlutterSearch.updatePrivacyAgree(true);
AmapFlutterSearch.updatePrivacyShow(true, true);
},
icon: const Icon(Icons.login),
label: const Text('注册ID')),
// 搜索框
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: textEditingController,
),
),
TextButton.icon(
onPressed: () async {
dataList = await AmapFlutterSearch.searchKeyword(
textEditingController.text,
city: "广州");
setState(() {});
},
icon: const Icon(Icons.search),
label: const Text('搜索')),
],
),
),
// 周边搜索按钮
TextButton.icon(
onPressed: () async {
dataList = await AmapFlutterSearch.searchAround(
Location(latitude: 23.110081, longitude: 113.401344),
keyword: textEditingController.text);
setState(() {});
},
icon: const Icon(Icons.search),
label: const Text('周边搜索')),
// 显示搜索结果
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text(dataList[index].name ?? ''),
subtitle: Text(dataList[index].address ?? ''),
trailing: Text('距离:${dataList[index].distance}米'),
);
},
itemCount: dataList.length,
),
),
],
),
),
);
}
}
更多关于Flutter高德地图搜索功能插件amap_flutter_search的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter高德地图搜索功能插件amap_flutter_search的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
amap_flutter_search
是一个用于在 Flutter 应用中集成高德地图搜索功能的插件。它允许你通过高德地图的 API 进行地点搜索、POI(兴趣点)搜索、地理编码和逆地理编码等操作。
1. 添加依赖
首先,你需要在 pubspec.yaml
文件中添加 amap_flutter_search
插件的依赖:
dependencies:
flutter:
sdk: flutter
amap_flutter_search: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get
来安装依赖。
2. 配置高德地图 API Key
在使用 amap_flutter_search
之前,你需要在 AndroidManifest.xml
和 Info.plist
中配置高德地图的 API Key。
Android 配置
在 android/app/src/main/AndroidManifest.xml
文件中添加以下内容:
<application>
<meta-data
android:name="com.amap.api.v2.apikey"
android:value="YOUR_AMAP_API_KEY"/>
</application>
iOS 配置
在 ios/Runner/Info.plist
文件中添加以下内容:
<key>AMapApiKey</key>
<string>YOUR_AMAP_API_KEY</string>
3. 使用 amap_flutter_search
进行搜索
以下是一个简单的示例,展示如何使用 amap_flutter_search
进行地点搜索:
import 'package:flutter/material.dart';
import 'package:amap_flutter_search/amap_flutter_search.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: SearchPage(),
);
}
}
class SearchPage extends StatefulWidget {
[@override](/user/override)
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> {
final AMapSearch _aMapSearch = AMapSearch();
List<AMapPOI> _poiList = [];
[@override](/user/override)
void initState() {
super.initState();
_aMapSearch.setApiKey("YOUR_AMAP_API_KEY");
}
void _searchPOI(String keyword) async {
AMapPOISearchRequest request = AMapPOISearchRequest(
keywords: keyword,
city: "北京", // 指定城市
);
AMapPOISearchResponse response = await _aMapSearch.searchPOI(request);
setState(() {
_poiList = response.pois;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("高德地图搜索示例"),
),
body: Column(
children: [
TextField(
onSubmitted: _searchPOI,
decoration: InputDecoration(
hintText: "输入搜索关键字",
),
),
Expanded(
child: ListView.builder(
itemCount: _poiList.length,
itemBuilder: (context, index) {
AMapPOI poi = _poiList[index];
return ListTile(
title: Text(poi.name),
subtitle: Text(poi.address),
);
},
),
),
],
),
);
}
}