如何在Flutter中基于API获取的经纬度在地图上显示位置标记

一、选用地图插件 #

优先推荐google_maps_flutter（谷歌官方插件）或flutter_map（开源轻量插件），下面以google_maps_flutter为例说明实现步骤。

二、添加依赖 #

在pubspec.yaml中添加插件依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0 # 请使用最新版本

执行flutter pub get安装依赖。

三、配置平台权限 #

• Android：在android/app/src/main/AndroidManifest.xml中添加权限及API密钥配置：

  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="YOUR_GOOGLE_MAPS_API_KEY"/>
  

• iOS：在ios/Runner/Info.plist中添加位置权限描述及API密钥：

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>需要获取位置权限以显示地图</string>
  <key>io.flutter.embedded_views_preview</key>
  <string>YES</string>
  <key>GoogleMapsAPIKey</key>
  <string>YOUR_GOOGLE_MAPS_API_KEY</string>
  

四、实现核心逻辑 #

1. 定义房屋数据模型

class House {
  final String id;
  final String name;
  final double latitude;
  final double longitude;

  House({required this.id, required this.name, required this.latitude, required this.longitude});
}

2. 对接API获取房屋数据

Future<List<House>> fetchHousesFromApi() async {
  // 替换为你的真实API请求逻辑，比如使用http/dio库发起请求
  // var response = await Dio().get("your_api_url");
  // 解析response数据生成House列表
  await Future.delayed(const Duration(seconds: 1));
  return [
    House(id: "1", name: "XX小区一室一厅", latitude: 39.9042, longitude: 116.4074),
    House(id: "2", name: "XX商圈两居室", latitude: 39.9151, longitude: 116.4039),
  ];
}

3. 构建地图页面

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

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

  @override
  State<HouseMapPage> createState() => _HouseMapPageState();
}

class _HouseMapPageState extends State<HouseMapPage> {
  late GoogleMapController _mapController;
  List<House> _houses = [];
  Set<Marker> _markers = {};
  final CameraPosition _initialCameraPosition = const CameraPosition(
    target: LatLng(39.9042, 116.4074), // 默认定位点，可根据需求调整
    zoom: 12,
  );

  @override
  void initState() {
    super.initState();
    _loadHousesAndMarkers();
  }

  Future<void> _loadHousesAndMarkers() async {
    _houses = await fetchHousesFromApi();
    _generateMarkers();
    setState(() {});
  }

  void _generateMarkers() {
    _markers.clear();
    for (var house in _houses) {
      _markers.add(
        Marker(
          markerId: MarkerId(house.id),
          position: LatLng(house.latitude, house.longitude),
          infoWindow: InfoWindow(title: house.name),
          // 自定义标记样式，默认蓝色标记；若要用自定义图片，见下方说明
          icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("租房地图")),
      body: GoogleMap(
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (controller) => _mapController = controller,
        markers: _markers,
        myLocationEnabled: true, // 可选：显示当前位置
      ),
    );
  }
}

五、自定义标记图标 #

如果需要和示例图一致的自定义标记，按以下步骤修改：

1. 将标记图片放入assets/icons/目录，在pubspec.yaml中声明资源：

flutter:
  assets:
    - assets/icons/house_marker.png

2. 修改_generateMarkers方法中的icon属性：

icon: await BitmapDescriptor.fromAssetImage(
  ImageConfiguration(size: const Size(40, 40)), // 控制标记大小
  'assets/icons/house_marker.png',
),

注意：此方法为异步，需将_generateMarkers改为Future<void>类型，调用时加上await。

注意事项 #

• 确保谷歌地图API密钥已开启Maps SDK for Android/iOS服务
• 处理API请求异常，比如网络错误时给用户提示
• 大量房屋数据时，考虑分批加载或优化标记渲染性能

内容的提问来源于stack exchange，提问作者Harry