Flutter地图搜索插件amap_search

Flutter地图搜索插件amap_search_fluttify的使用

高德地图搜索组件

高德地图搜索组件。Dart接口基于Fluttify引擎生成。接口文档。

DEMO 与社区

Demo	QQ群
扫描二维码或者点击下载	加入QQ群讨论

安装:

dependencies:
  flutter:
    sdk: flutter
  amap_search_fluttify: ^x.x.x

导入:

import 'package:amap_search_fluttify/amap_search_fluttify.dart';

使用:

/// 注意: 只要是返回Future的方法, 一律使用`await`修饰, 确保当前方法执行完成后再执行下一行, 在不能使用`await`修饰的环境下, 在`then`方法中执行下一步。
/// 初始化 iOS在init方法中设置, android需要去AndroidManifest.xml里去设置, 详见https://lbs.amap.com/api/android-sdk/gettingstarted
await AmapCore.init('ios key');

/// 重要: 通过AmapSearchDisposeMixin释放native端的对象, 否则native端会内存泄漏!
class _KeywordPoiScreenState extends State<KeywordPoiScreen> with AmapSearchDisposeMixin {}

/// 搜索关键字poi
final poiList = await AmapSearch.instance.searchKeyword(
                _keywordController.text,
                city: _cityController.text,
              );

/// 搜索周边poi
final poiList = await AmapSearch.instance.searchAround(
                LatLng(
                  double.tryParse(_latController.text) ?? 29.08,
                  double.tryParse(_lngController.text) ?? 119.65,
                ),
                keyword: _keywordController.text,
              );

/// 输入提示
final inputTipList = await AmapSearch.instance.fetchInputTips(
                _keywordController.text,
                city: _cityController.text,
              );

/// 地理编码（地址转坐标）
final geocodeList = await AmapSearch.instance.searchGeocode(
                _keywordController.text,
                city: _cityController.text,
              );

/// 逆地理编码（坐标转地址）
final reGeocodeList = await AmapSearch.instance.searchReGeocode(
                LatLng(
                  double.parse(_latController.text),
                  double.parse(_lngController.text),
                ),
                radius: 200.0,
              );

/// 获取行政区划数据
final district = await AmapSearch.instance.searchDistrict(_keywordController.text);

/// 获取天气数据
final district = await AmapSearch.instance.searchDistrict(_keywordController.text);

/// 公交路径规划(未完成)
final routeResult = await AmapSearch.instance.searchBusRoute(
                from: LatLng(
                  double.parse(_fromLatController.text),
                  double.parse(_fromLngController.text),
                ),
                to: LatLng(
                  double.parse(_toLatController.text),
                  double.parse(_toLngController.text),
                ),
                city: '杭州',
              );

/// 驾车路径规划
final routeResult = await AmapSearch.instance.searchDriveRoute(
                from: LatLng(
                  double.parse(_fromLatController.text),
                  double.parse(_fromLngController.text),
                ),
                to: LatLng(
                  double.parse(_toLatController.text),
                  double.parse(_toLngController.text),
                ),
              );

/// 骑行路径规划
final routeResult = await AmapSearch.instance.searchRideRoute(
                from: LatLng(
                  double.parse(_fromLatController.text),
                  double.parse(_fromLngController.text),
                ),
                to: LatLng(
                  double.parse(_toLatController.text),
                  double.parse(_toLngController.text),
                ),
              );

/// 步行路径规划
final routeResult = await AmapSearch.instance.searchWalkRoute(
                from: LatLng(
                  double.parse(_fromLatController.text),
                  double.parse(_fromLngController.text),
                ),
                to: LatLng(
                  double.parse(_toLatController.text),
                  double.parse(_toLngController.text),
                ),
              );

完整示例demo

import 'package:amap_search_fluttify/amap_search_fluttify.dart';
import 'package:flutter/material.dart';

import 'get_map_data/get_address_desc.screen.dart';
import 'get_map_data/get_bus_info.screen.dart';
import 'get_map_data/get_district_info.screen.dart';
import 'get_map_data/get_poi.screen.dart';
import 'get_map_data/get_weather_info.screen.dart';
import 'route_plan/route_bus.screen.dart';
import 'route_plan/route_drive.screen.dart';
import 'route_plan/route_ride.screen.dart';
import 'route_plan/route_walk.screen.dart';
import 'widgets/function_group.widget.dart';
import 'widgets/function_item.widget.dart';
import 'widgets/todo.screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await AmapSearch.instance.init('f583e0d5b70400167993615c3adc3ced');
  await AmapSearch.instance.updatePrivacyShow(true);
  await AmapSearch.instance.updatePrivacyAgree(true);

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  const Home({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AMaps examples')),
      body: ListView(
        children: [
          FunctionGroup(
            headLabel: '获取地图数据',
            children: [
              FunctionItem(
                label: '获取POI数据',
                sublabel: 'GetPoiScreen',
                target: GetPoiScreen(),
              ),
              FunctionItem(
                label: '获取地址描述数据',
                sublabel: 'GetAddressDescScreen',
                target: GetAddressDescScreen(),
              ),
              FunctionItem(
                label: '获取行政区划数据',
                sublabel: 'GetDistrictInfoScreen',
                target: GetDistrictInfoScreen(),
              ),
              FunctionItem(
                label: '获取公交数据',
                sublabel: 'GetBusInfoScreenScreen',
                target: GetBusInfoScreen(),
              ),
              FunctionItem(
                label: '后获取天气数据',
                sublabel: 'GetWeatherInfoScreen',
                target: GetWeatherInfoScreen(),
              ),
              FunctionItem(
                label: '获取业务数据(云图功能)',
                sublabel: 'TODO',
                target: TodoScreen(),
              ),
              FunctionItem(
                label: '获取交通态势信息',
                sublabel: 'TODO',
                target: TodoScreen(),
              ),
            ],
          ),
          FunctionGroup(
            headLabel: '出行路线规划',
            children: [
              FunctionItem(
                label: '驾车出行路线规划',
                sublabel: 'RouteDriveScreen',
                target: RouteDriveScreen(),
              ),
              FunctionItem(
                label: '步行出行路线规划',
                sublabel: 'RouteWalkScreen',
                target: RouteWalkScreen(),
              ),
              FunctionItem(
                label: '公交出行路线规划',
                sublabel: 'RouteBusScreen',
                target: RouteBusScreen(),
              ),
              FunctionItem(
                label: '骑行出行路线规划',
                sublabel: 'RouteRideScreen',
                target: RouteRideScreen(),
              ),
              FunctionItem(
                label: '货车出行路线规划',
                sublabel: 'TODO',
                target: TodoScreen(),
              ),
              FunctionItem(
                label: '未来出行路线规划',
                sublabel: 'TODO',
                target: TodoScreen(),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

更多关于Flutter地图搜索插件amap_search_fluttify的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼

更多关于Flutter地图搜索插件amap_search_fluttify的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用amap_search_fluttify插件来实现地图搜索功能的代码示例。这个插件封装了高德地图的搜索功能，包括关键字搜索、POI搜索、地理编码、逆地理编码等。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加amap_search_fluttify依赖：

dependencies:
  flutter:
    sdk: flutter
  amap_search_fluttify: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Android和iOS

Android

在android/app/src/main/AndroidManifest.xml中添加高德地图的API Key：

<meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="你的高德地图API Key"/>

iOS

在ios/Runner/Info.plist中添加高德地图的API Key：

<key>AMapKey</key>
<string>你的高德地图API Key</string>

3. 使用插件

以下是一个简单的示例，展示如何使用amap_search_fluttify进行关键字搜索：

import 'package:flutter/material.dart';
import 'package:amap_search_fluttify/amap_search_fluttify.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  AMapSearchFluttify? _amapSearch;
  List<AMapSearchPOISearchResult?>? _searchResults;

  @override
  void initState() {
    super.initState();
    // 初始化AMapSearchFluttify
    _amapSearch = AMapSearchFluttify()
      ..setApiKey('你的高德地图API Key')  // 设置API Key
      ..init();
  }

  @override
  void dispose() {
    _amapSearch?.dispose();
    super.dispose();
  }

  Future<void> _searchPOIs(String keywords) async {
    AMapSearchPOISearchRequest request = AMapSearchPOISearchRequest()
      ..keywords = keywords
      ..city = "北京"
      ..pageIndex = 1
      ..pageSize = 10;

    try {
      AMapSearchPOISearchResult? result = await _amapSearch!.searchPOI(request);
      setState(() {
        _searchResults = [result];
      });
    } catch (e) {
      print("搜索失败: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AMap Search Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(hintText: '输入搜索关键字'),
                onChanged: (value) {
                  // 可以在这里添加防抖逻辑
                },
                onEditingComplete: () {
                  _searchPOIs(textController.text);  // 假设有一个textController来管理TextField的文本
                },
              ),
              SizedBox(height: 20),
              Expanded(
                child: _searchResults != null && _searchResults!.isNotEmpty
                    ? ListView.builder(
                        itemCount: _searchResults![0]!.pois!.length,
                        itemBuilder: (context, index) {
                          AMapSearchPOISearchResultPOI? poi =
                              _searchResults![0]!.pois![index];
                          return ListTile(
                            title: Text(poi!.name!),
                            subtitle: Text(poi.address!),
                          );
                        },
                      )
                    : Container(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意：

上面的代码示例假设你有一个TextField的文本控制器textController来管理用户输入，但在上面的代码片段中为了简化没有展示其定义和初始化。在实际应用中，你需要定义并初始化一个TextEditingController并将其赋值给TextField的controller属性。
AMapSearchFluttify的初始化应该在应用启动时尽早进行，以确保搜索功能可以立即使用。
请确保你已经替换了你的高德地图API Key为实际的高德地图API Key。

这个示例展示了如何使用amap_search_fluttify插件进行POI搜索，并将搜索结果展示在UI上。你可以根据需要扩展和修改这个示例来实现更多功能，如地理编码、逆地理编码等。

Flutter地图搜索插件amap_search_fluttify的使用