[Flutter - Mapbox GL] 地图初始化加载时如何添加Symbol标记？

以下是你当前代码存在的问题及对应修复方案：

• 参数顺序错误：LatLng构造函数第一个参数为纬度，第二个为经度，你当前代码中写反了deviceLongitude和deviceLatitude的位置，会导致标记被绘制到错误坐标，自然无法在目标区域看到。
• 图片资源未注册：不能直接传入本地assets路径作为iconImage参数，Mapbox需要先将图片资源注册到地图实例中才能调用。
• 偏移量设置不合理：iconOffset设置为Offset(0, -150)数值过大，会直接将标记偏移到可视区域外，通常偏移量只需设置为图标高度的1/2即可，比如32px高的图标设置Offset(0, -16)就能让图标底部对准坐标点。
• 图标尺寸过小：iconSize设置为0.1会将原图缩小到原尺寸的10%，如果原图本身尺寸不大，最终渲染的标记会小到无法识别。

修正后的代码示例 #

import 'package:flutter/services.dart';
import 'dart:typed_data';

void _onMapCreated(MapboxMapController controller) async {
  mapController = controller;
  // 第一步：加载本地assets图片的字节数据
  final ByteData bytes = await rootBundle.load('assets/map_marker_device.png');
  final Uint8List imageData = bytes.buffer.asUint8List();
  // 第二步：将图片注册到地图实例，自定义唯一id
  await mapController?.addImage('device-marker', imageData);
  // 第三步：添加标记，修正参数
  deviceMarker = await mapController!.addSymbol(SymbolOptions(
      geometry: LatLng(deviceLatitude, deviceLongitude), // 修正坐标顺序
      iconImage: "device-marker", // 使用注册的图片id
      iconSize: 0.8, // 先调整为适中大小测试，确认显示后再按需调整
      iconOffset: const Offset(0, -20))); // 调整为合理偏移量
}

额外排查点 #

如果修改后仍无法显示，可依次检查：

• 确认pubspec.yaml中已经正确声明了assets/map_marker_device.png资源，路径完全匹配无拼写错误
• 确认地图实例初始化完成、样式加载完成后再执行添加标记的逻辑
• 测试时可以先固定一个确定的当前视口中心坐标添加标记，排除坐标本身不在可视区域的问题

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