在Flutter中集成高德地图进行兴趣点搜索时，如何正确配置API密钥和初始化地图？

在Flutter中集成高德地图进行兴趣点搜索时，如何正确配置API密钥和初始化地图？搜索结果的回调数据包含哪些关键字段？如何将获取的兴趣点数据解析并展示在地图上，比如使用Marker或自定义InfoWindow？遇到"INVALID_USER_KEY"错误该如何排查？能否提供一个完整的示例代码，包括搜索请求、结果处理和地图标注的实现步骤？

3 回复

首先，引入高德地图 Flutter 插件 flutter_amap_map_fluttify。

  1. 初始化：在 main 函数中初始化 AMap API Key：

    void main() {
  WidgetsFlutterBinding.ensureInitialized();
  AMAP.init('your_amap_api_key');
  runApp(MyApp());
}

  2. 创建地图页面：使用 AMapWidget 展示地图。

    class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<LatLng> pois = [];

  Future<void> searchPOI(String keyword) async {
    final result = await POISearch.search(keyword, LatLng(39.90960486, 116.397228)); // 北京坐标
    setState(() {
      pois = result.map((e) => e.latLng).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('高德地图兴趣点搜索')),
      body: Stack(
        children: [
          AMapWidget(),
          pois.isNotEmpty
              ? CustomPaint(
                  painter: PoiPainter(pois),
                )
              : SizedBox.shrink(),
          ElevatedButton(
            onPressed: () => searchPOI('餐馆'),
            child: Text('搜索餐馆'),
          ),
        ],
      ),
    );
  }
}

class PoiPainter extends CustomPainter {
  final List<LatLng> pois;

  PoiPainter(this.pois);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.red;
    pois.forEach((poi) {
      canvas.drawCircle(Offset(poi.longitude, poi.latitude), 5, paint);
    });
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

通过上述代码可实现基本的地图展示和兴趣点搜索功能。

更多关于在Flutter中集成高德地图进行兴趣点搜索时，如何正确配置API密钥和初始化地图？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


作为屌丝程序员，以下是一个简单的Flutter中使用高德地图进行兴趣点搜索与展示的教程：

  1. 配置高德地图SDK
    首先，在高德开放平台申请API Key，并在pubspec.yaml添加amap_map_fluttify依赖。安装完成后初始化高德SDK。

  2. 创建地图页面
    使用AmapView加载地图，设置默认显示区域，例如上海市中心。

  3. 实现兴趣点搜索
    调用高德的POI搜索接口，通过AmapPoiSearch传入关键字（如“餐厅”）和搜索范围。示例代码：

    final search = AmapPoiSearch()..query('餐厅', LatLng(31.22, 121.48));
search.onResult.listen((event) {
  event.results.forEach(print); // 打印搜索结果
});

  4. 标记并展示兴趣点
    将搜索到的结果标注在地图上。获取每个POI的位置后，用MarkerOptions创建标记并添加到地图上。

    for (final poi in results) {
  mapView.addMarker(MarkerOptions(
    position: poi.location,
    title: poi.name,
    snippet: poi.address,
  ));
}

  5. 运行效果
    运行程序后，地图会自动搜索指定范围内的兴趣点并标记展示。

此教程适合初学者快速搭建功能，屌丝程序员无需额外支出，即可实现地图开发需求。

Flutter高德地图开发：兴趣点搜索与展示

准备工作

  1. 添加高德地图Flutter插件依赖：
dependencies:
  amap_flutter_map: ^3.0.0
  amap_flutter_search: ^3.0.0
  1. 在Android/iOS项目中配置高德地图SDK（参考官方文档申请API Key）

基本实现步骤

1. 初始化地图

import 'package:amap_flutter_map/amap_flutter_map.dart';

AMapWidget(
  apiKey: const AMapApiKey(
    androidKey: '您的Android Key',
    iosKey: '您的iOS Key',
  ),
  onMapCreated: (controller) {
    // 地图创建完成回调
    _mapController = controller;
  },
)

2. 兴趣点(POI)搜索

import 'package:amap_flutter_search/amap_flutter_search.dart';

final _search = AMapSearch();
final _poiController = TextEditingController();

// 搜索方法
void _searchPOI() async {
  final result = await _search.searchPOI(
    AMapPOISearch(
      query: _poiController.text, // 搜索关键字
      city: '北京', // 城市限制(可选)
      types: '', // POI类型(可选)
      location: AMapGeoPoint(
        latitude: 39.904989,
        longitude: 116.405285,
      ), // 中心点(可选)
      radius: 1000, // 搜索半径(可选)
    ),
  );
  
  if (result.pois != null) {
    setState(() {
      _poiList = result.pois!;
    });
  }
}

3. 展示搜索结果

ListView.builder(
  itemCount: _poiList.length,
  itemBuilder: (context, index) {
    final poi = _poiList[index];
    return ListTile(
      title: Text(poi.name),
      subtitle: Text(poi.address),
      onTap: () {
        // 点击后移动地图中心到该POI位置
        _mapController?.moveCamera(
          CameraUpdate.newLatLng(
            LatLng(poi.location.latitude, poi.location.longitude),
          ),
        );
      },
    );
  },
)

4. 在地图上标记POI

Set<Marker> _buildPOIMarkers() {
  return _poiList.map((poi) {
    return Marker(
      position: LatLng(poi.location.latitude, poi.location.longitude),
      infoWindow: InfoWindow(title: poi.name, snippet: poi.address),
    );
  }).toSet();
}

// 在AMapWidget中添加
markers: _buildPOIMarkers(),

高级功能

  1. 输入提示搜索：使用_search.searchInputTips()实现类似自动补全的效果
  2. 周边搜索：设置location和radius参数实现周边POI搜索
  3. 分类搜索：使用types参数按照高德分类代码搜索特定类型POI
  4. 分页加载：使用page和pageSize参数实现分页加载

记得在实际使用时处理权限请求和错误情况，并根据需要调整UI样式。

回到顶部