Flutter地图搜索插件amap_search_muka的使用

引入方式

pubspec.yaml文件中添加以下依赖:

dependencies:
  amap_search_muka: ^0.0.1

支持的功能

该插件支持以下功能:

  • ✅ 关键字检索POI
  • ✅ 周边检索POI
  • ✅ 输入内容自动提示

使用示例

以下是完整的示例代码,展示如何使用amap_search_muka插件进行地图搜索。

示例代码
import 'package:amap_search_muka/amap_search_muka.dart';
import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    // 初始化隐私设置
    AMapSearch.updatePrivacyShow(true, true);
    AMapSearch.updatePrivacyAgree(true);
    
    // 设置高德地图API Key(Android和iOS分别填写)
    AMapSearch.setApiKey('your_android_api_key', 'your_ios_api_key');

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AMap Search Plugin Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                child: Text('关键字检索POI'),
                onPressed: () async {
                  print('关键字检索POI');
                  // 搜索关键字为“广场”,城市为“成都”
                  List<AMapPoi> poi = await AMapSearch.searchKeyword('广场', city: '成都', page: 1, pageSize: 1);
                  print('搜索结果数量: ${poi.length}');
                  poi.forEach((element) {
                    print('POI详情: ${element.toJson()}');
                  });
                },
              ),
              ElevatedButton(
                child: Text('周边检索POI'),
                onPressed: () async {
                  print('周边检索POI');
                  // 检索周围10公里范围内的火车站
                  List<AMapPoi> poi = await AMapSearch.searchAround(
                    LatLng(30.68025, 104.080081), 
                    types: '火车站', 
                    radius: 10000,
                  );
                  poi.forEach((element) {
                    print('POI详情: ${element.toJson()}');
                  });
                },
              ),
              ElevatedButton(
                child: Text('输入内容自动提示'),
                onPressed: () async {
                  print('输入内容自动提示');
                  // 获取输入提示
                  List<dynamic> tips = await AMapSearch.fetchInputTips('火车');
                  tips.forEach((element) {
                    print('提示信息: ${element.toJson()}');
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


amap_search_muka 是一个 Flutter 插件,用于在 Flutter 应用中集成高德地图的搜索功能。它提供了多种搜索功能,如关键字搜索、周边搜索、地理编码、逆地理编码等。以下是如何使用 amap_search_muka 插件的基本步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 amap_search_muka 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  amap_search_muka: ^latest_version

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

2. 配置高德地图 SDK

在使用 amap_search_muka 之前,你需要在 高德开放平台 注册并创建一个应用,获取 API Key

Android 项目中,打开 android/app/src/main/AndroidManifest.xml 文件,添加以下配置:

<application>
    <meta-data
        android:name="com.amap.api.v2.apikey"
        android:value="YOUR_API_KEY"/>
</application>

iOS 项目中,打开 ios/Runner/Info.plist 文件,添加以下配置:

<key>AMapApiKey</key>
<string>YOUR_API_KEY</string>

3. 初始化插件

在使用插件之前,需要先初始化它。通常可以在 main.dart 文件中进行初始化:

import 'package:amap_search_muka/amap_search_muka.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AMapSearch.instance.init('YOUR_API_KEY');
  runApp(MyApp());
}

4. 使用搜索功能

amap_search_muka 提供了多种搜索功能,以下是一些常见的使用示例:

关键字搜索

import 'package:amap_search_muka/amap_search_muka.dart';

void searchByKeyword() async {
  var result = await AMapSearch.instance.searchKeyword(
    keyword: '餐厅',
    city: '北京',
  );
  print(result);
}

周边搜索

void searchAround() async {
  var result = await AMapSearch.instance.searchAround(
    center: LatLng(39.90469, 116.40717),
    keyword: '餐厅',
    radius: 1000,
  );
  print(result);
}

地理编码(地址转坐标)

void geocode() async {
  var result = await AMapSearch.instance.geocode(
    address: '北京市朝阳区望京SOHO',
    city: '北京',
  );
  print(result);
}

逆地理编码(坐标转地址)

void regeocode() async {
  var result = await AMapSearch.instance.regeocode(
    latLng: LatLng(39.90469, 116.40717),
  );
  print(result);
}

5. 处理搜索结果

搜索结果通常是一个包含多个 POI(兴趣点)的列表。你可以遍历这些结果并显示在 UI 中。

void handleSearchResult(List<AMapPOI> pois) {
  for (var poi in pois) {
    print('名称: ${poi.name}');
    print('地址: ${poi.address}');
    print('坐标: ${poi.latLng}');
  }
}

6. 错误处理

在使用插件时,可能会遇到一些错误,如网络问题、API 调用失败等。你可以使用 try-catch 来捕获并处理这些错误。

void search() async {
  try {
    var result = await AMapSearch.instance.searchKeyword(
      keyword: '餐厅',
      city: '北京',
    );
    handleSearchResult(result);
  } catch (e) {
    print('搜索失败: $e');
  }
}
回到顶部