Flutter 3.22+ 如何集成高德flutter地图并自定义marker显示

在Flutter 3.22+版本中，我想集成高德地图插件并自定义Marker的显示样式，但目前遇到了一些问题。按照官方文档集成后，地图能正常显示，但自定义Marker时无法加载本地图片或动态生成的Widget作为图标。尝试过使用BitmapDescriptor.fromAssetImage和BitmapDescriptor.fromWidget方法，要么图片不显示，要么直接报错。请问如何正确实现自定义Marker？是否需要额外配置？如果有完整的代码示例就更好了。

2 回复

Flutter 3.22+集成高德地图步骤：

  1. 添加依赖：amap_flutter_map最新版
  2. 配置Android/iOS密钥
  3. 使用AMapWidget加载地图
  4. 自定义Marker：通过Marker类设置icon属性，可使用自定义Widget转图片
  5. 通过Markers集合管理多个标记点

关键代码：

Marker(
  position: LatLng(39.909, 116.397),
  icon: BitmapDescriptor.fromBytes(customIconBytes),
)

更多关于Flutter 3.22+ 如何集成高德flutter地图并自定义marker显示的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 3.22+ 中集成高德地图并自定义 Marker，可按照以下步骤操作：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  amap_flutter_map: ^8.0.0 # 检查最新版本

运行 flutter pub get。

2. 配置权限和Key

Android (android/app/src/main/AndroidManifest.xml)：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<application>
  <meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="你的高德Key"/>
</application>

iOS (ios/Runner/Info.plist)：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限</string>
<key>AMapApiKey</key>
<string>你的高德Key</string>

3. 基本地图集成

import 'package:amap_flutter_map/amap_flutter_map.dart';

AMapWidget(
  apiKey: const AMapApiKey(
    iosKey: 'iOS Key',
    androidKey: 'Android Key',
  ),
  onMapCreated: (controller) {
    // 地图创建回调
  },
)

4. 自定义Marker

// 定义Marker
final List<Marker> _markers = [
  Marker(
    position: const LatLng(39.90960, 116.397228),
    icon: BitmapDescriptor.defaultMarkerWithHue(
      BitmapDescriptor.hueRed, // 使用预设颜色
    ),
    infoWindow: const InfoWindow(
      title: '自定义Marker',
      snippet: '这是描述信息',
    ),
  ),
  Marker(
    position: const LatLng(39.90960, 116.397228),
    icon: BitmapDescriptor.fromBytes(await _getBytesFromAsset(
      'assets/custom_icon.png', 
      100, // 宽度
    )), // 自定义图标
  ),
];

// 在AMapWidget中使用
AMapWidget(
  markers: Set<Marker>.of(_markers),
  // 其他参数...
)

// 从Assets加载自定义图标
Future<Uint8List> _getBytesFromAsset(String path, int width) async {
  ByteData data = await rootBundle.load(path);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: width);
  ui.FrameInfo fi = await codec.getNextFrame();
  return (await fi.image.toByteData(format: ui.ImageByteFormat.png))!.buffer.asUint8List();
}

5. 动态更新Marker

// 通过AMapController更新
final AMapController? _mapController;

void _updateMarker() {
  _mapController?.updateMarker(Marker(
    markerId: MarkerId('custom_marker'),
    position: LatLng(新的纬度, 新的经度),
    icon: BitmapDescriptor.fromBytes(await _getBytesFromAsset(...)),
  ));
}

注意事项：

  1. 确保在高德开放平台申请正确的Key
  2. iOS需要额外配置io.flutter.embedded_views_preview为true
  3. 自定义图标建议使用PNG格式，尺寸不宜过大
  4. 注意处理位置权限申请

通过以上步骤即可在Flutter 3.22+中集成高德地图并实现自定义Marker显示。

回到顶部