Flutter高德地图搜索功能插件amap_flutter_search的使用

前述

  1. 高德搜索Flutter插件
  2. 登录高德开放平台官网分别申请Android端iOS端的key
  3. 如需了解高德搜索原生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&lt;List&lt;AMapPoi&gt;&gt; searchKeyword(
  String keyword, {
  String city = '',
  String types = '',
  int pageSize = 20,
  int page = 1,
})

示例:

List&lt;AMapPoi&gt; 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&lt;List&lt;AMapPoi&gt;&gt; searchAround(
  Location center, {
  String keyword,
  String city,
  int pageSize,
  int page,
  int radius,
})

示例:

List&lt;AMapPoi&gt; 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&lt;MyApp&gt; createState() =&gt; _MyAppState();
}

class _MyAppState extends State&lt;MyApp&gt; {
  String _platformVersion = 'Unknown';
  List&lt;AMapPoi&gt; dataList = [];
  late TextEditingController textEditingController;

  [@override](/user/override)
  void initState() {
    super.initState();
    textEditingController = TextEditingController();
    initPlatformState();
  }

  // 初始化平台状态
  Future&lt;void&gt; 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

1 回复

更多关于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.xmlInfo.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),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
回到顶部