Flutter地图搜索插件gxcm_amap_search的使用

gxcm_amap_search

这是一个用于在Flutter应用中实现地图搜索功能的插件。它支持通过关键词搜索和周边搜索来获取地理位置信息。

使用步骤

1. 初始化插件

在使用插件之前，需要设置高德地图的API Key并同意隐私政策。

TextButton.icon(
  onPressed: () {
    // 设置高德地图API Key
    GxcmAmapSearch.setApiKey('f53141bcada3bd03fd79c37f652cd45f', 'df6898859be82405b9b41d8d1f1e86d3');
    // 同意隐私政策
    GxcmAmapSearch.updatePrivacyAgree(true);
    GxcmAmapSearch.updatePrivacyShow(true, true);
  },
  icon: const Icon(Icons.login),
  label: const Text('注册id'),
)

2. 关键词搜索

通过输入关键词（如“餐厅”、“学校”等）和城市名称，可以搜索相关的地理位置信息。

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Row(
    children: [
      Expanded(
        child: TextField(
          controller: textEditingController,
        ),
      ),
      TextButton.icon(
        onPressed: () async {
          // 执行关键词搜索
          dataList = await GxcmAmapSearch.searchKeyword(
            keyword: textEditingController.text,
            city: "深圳市",
            types: "餐饮服务|商务住宅|生活服务|风景名胜|购物服务|科教文化服务|公司企业|政府机构及社会团体|道路附属设施|地名地址信息|公共设施",
          );
          setState(() {}); // 更新UI
        },
        icon: const Icon(Icons.search),
        label: const Text('关键词搜索'),
      ),
    ],
  ),
)

3. 周边搜索

通过指定经纬度、搜索类型和关键词，可以获取附近的地理位置信息。

TextButton.icon(
  onPressed: () async {
    // 执行周边搜索
    dataList = await GxcmAmapSearch.searchAround(
      latitude: 22.600323788793503, // 纬度
      longitude: 114.10581646859714, // 经度
      types: "餐饮服务|商务住宅|生活服务|风景名胜|购物服务|科教文化服务|公司企业|政府机构及社会团体|道路附属设施|地名地址信息|公共设施",
      keyword: textEditingController.text,
    );
    setState(() {}); // 更新UI
  },
  icon: const Icon(Icons.search),
  label: const Text('周边搜索'),
)

4. 显示搜索结果

将搜索到的数据列表展示在一个可滚动的列表视图中。

Expanded(
  child: ListView.builder(
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(dataList[index].title), // 地理位置名称
        subtitle: Text(dataList[index].snippet), // 描述信息
        trailing: Text(dataList[index].cityName), // 城市名称
      );
    },
    itemCount: dataList.length, // 数据长度
  ),
)

完整示例代码

以下是一个完整的示例代码，展示了如何集成和使用gxcm_amap_search插件。

import 'package:flutter/material.dart';
import 'package:gxcm_amap_search/SearchResultItem.dart';
import 'package:gxcm_amap_search/gxcm_amap_search.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final textEditingController = TextEditingController();
  List<SearchResultItem> dataList = [];

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('地图搜索插件示例'),
        ),
        body: Column(
          children: [
            // 注册API Key
            TextButton.icon(
              onPressed: () {
                GxcmAmapSearch.setApiKey('f53141bcada3bd03fd79c37f652cd45f', 'df6898859be82405b9b41d8d1f1e86d3');
                GxcmAmapSearch.updatePrivacyAgree(true);
                GxcmAmapSearch.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 GxcmAmapSearch.searchKeyword(
                        keyword: textEditingController.text,
                        city: "深圳市",
                        types: "餐饮服务|商务住宅|生活服务|风景名胜|购物服务|科教文化服务|公司企业|政府机构及社会团体|道路附属设施|地名地址信息|公共设施",
                      );
                      setState(() {}); // 更新UI
                    },
                    icon: const Icon(Icons.search),
                    label: const Text('关键词搜索'),
                  ),
                ],
              ),
            ),
            // 周边搜索按钮
            TextButton.icon(
              onPressed: () async {
                dataList = await GxcmAmapSearch.searchAround(
                  latitude: 22.600323788793503,
                  longitude: 114.10581646859714,
                  types: "餐饮服务|商务住宅|生活服务|风景名胜|购物服务|科教文化服务|公司企业|政府机构及社会团体|道路附属设施|地名地址信息|公共设施",
                  keyword: textEditingController.text,
                );
                setState(() {}); // 更新UI
              },
              icon: const Icon(Icons.search),
              label: const Text('周边搜索'),
            ),
            // 搜索结果列表
            Expanded(
              child: ListView.builder(
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(dataList[index].title), // 地理位置名称
                    subtitle: Text(dataList[index].snippet), // 描述信息
                    trailing: Text(dataList[index].cityName), // 城市名称
                  );
                },
                itemCount: dataList.length, // 数据长度
              ),
            ),
          ],
        ),
      ),
    );
  }
}