Flutter高德地图兴趣点搜索与展示功能

在Flutter中集成高德地图实现兴趣点搜索功能时,如何正确调用AMapSearchKit的POI搜索接口?我按照官方文档配置了API Key并添加了搜索依赖,但执行query.poiSearch()后总是返回错误码"INVALID_USER_KEY"。检查了SHA1和包名配置无误,也确认了Key的Android平台权限已开启。请问:

  1. 是否需要额外设置地图初始化才能使用搜索功能?
  2. 如何验证搜索请求参数是否完整传递(如city/cityLimit/keywords)?
  3. 有没有完整的Flutter插件使用示例,尤其是处理搜索回调的Dart侧代码写法?
3 回复

首先集成高德地图SDK到Flutter项目中,通过flutter_amap_map3d插件实现。创建一个包含地图的Widget,初始化时加载地图。

使用高德地图POI检索服务进行兴趣点搜索,调用AmapSearch.searchPOI()方法,传入关键字(如“餐厅”)、坐标范围和页码等参数。监听回调获取搜索结果列表。

将搜索到的兴趣点数据转换为Marker对象,在地图上标注展示。通过自定义Marker图标、设置点击事件等增强交互体验。例如,当用户点击某个Marker时,弹出详情框显示该兴趣点的名称、地址等信息。

最后记得处理权限申请、网络异常等问题,确保功能稳定运行。整个过程需要熟悉Flutter状态管理和原生模块调用机制。

更多关于Flutter高德地图兴趣点搜索与展示功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要在Flutter中实现高德地图的兴趣点(POI)搜索与展示,可以使用flutter_map插件配合高德的地图服务。首先,注册高德开放平台账号并创建应用获取API Key。

  1. 添加依赖:在pubspec.yaml中添加flutter_map和网络请求相关的依赖如http
  2. 初始化地图:使用flutter_map创建基础地图,并在其中嵌入高德的瓦片图层。
  3. 实现POI搜索:调用高德地图的POI搜索API,构造请求参数包括关键词、范围等,通过http.get()发送请求。
  4. 解析数据并标注:将返回的JSON数据解析为POI列表,遍历列表,在地图上用Marker标记每个兴趣点的位置。
  5. 优化交互:为每个标记绑定点击事件,显示详细信息窗口或跳转至详情页。

示例代码片段:

final pois = await http.get(Uri.parse('https://restapi.amap.com/v3/place/text?parameters'));
final data = jsonDecode(pois.body);
data['pois'].forEach((poi) {
  mapController.markers.add(
    Marker(
      width: 80.0,
      height: 80.0,
      point: LatLng(double.parse(poi['location']), double.parse(poi['location'])),
      builder: (ctx) => Icon(Icons.location_on, color: Colors.blue),
    ),
  );
});

确保遵循高德API使用规范,合理设置配额和频率限制。

Flutter高德地图兴趣点搜索与展示功能实现

在Flutter中使用高德地图实现兴趣点(POI)搜索与展示功能,可以使用amap_flutter_mapamap_flutter_search插件。

实现步骤

1. 添加依赖

在pubspec.yaml中添加:

dependencies:
  amap_flutter_map: ^x.x.x
  amap_flutter_search: ^x.x.x

2. 配置Android和iOS

按照高德地图官方文档配置API Key和平台相关设置。

3. 基本实现代码

import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:amap_flutter_search/amap_flutter_search.dart';
import 'package:flutter/material.dart';

class POISearchPage extends StatefulWidget {
  @override
  _POISearchPageState createState() => _POISearchPageState();
}

class _POISearchPageState extends State<POISearchPage> {
  final AMapController _mapController = AMapController();
  final AMapSearch _search = AMapSearch();
  List<Poi> _pois = [];
  String _keyword = '餐厅';

  @override
  void initState() {
    super.initState();
    _search.setKey('你的高德地图Key');
  }

  Future<void> _searchPOI() async {
    var result = await _search.searchPOI(
      query: _keyword,
      city: '北京',
    );
    setState(() {
      _pois = result.pois;
    });
    
    if (_pois.isNotEmpty) {
      _mapController.moveCamera(
        CameraUpdate.newLatLng(
          LatLng(_pois[0].latitude, _pois[0].longitude),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('POI搜索')),
      body: Column(
        children: [
          Expanded(
            child: AMapWidget(
              onMapCreated: (controller) {
                _mapController = controller;
              },
              markers: _pois.map((poi) => Marker(
                position: LatLng(poi.latitude, poi.longitude),
                title: poi.title,
                snippet: poi.address,
              )).toSet(),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                labelText: '搜索关键词',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _searchPOI,
                ),
              ),
              onChanged: (value) => _keyword = value,
              onSubmitted: (_) => _searchPOI(),
            ),
          ),
          Expanded(
            flex: 1,
            child: ListView.builder(
              itemCount: _pois.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_pois[index].title),
                  subtitle: Text(_pois[index].address),
                  onTap: () {
                    _mapController.moveCamera(
                      CameraUpdate.newLatLng(
                        LatLng(_pois[index].latitude, _pois[index].longitude),
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

功能说明

  1. 地图显示:使用AMapWidget显示高德地图
  2. POI搜索:通过AMapSearch进行关键字搜索
  3. 结果展示:在地图上标记搜索结果,并在列表显示
  4. 交互功能:点击列表项可定位到对应POI

注意事项

  1. 需要申请高德地图开发者账号并获取API Key
  2. 需要在Android和iOS项目中分别配置高德地图SDK
  3. 搜索功能可能需要城市限制或周边搜索等更多参数

可以根据需求扩展功能,如分类搜索、周边搜索、分页加载等。

回到顶部