如何为TomTom Static Image API生成的地图添加标记？

要在TomTom Static Image API生成的地图上添加大头针标记，只需在请求URL中追加marker参数即可，具体格式和参数说明如下：

核心参数说明 #

• marker参数：用于定义标记的位置及样式，基础格式为：

  marker=<纬度>,<经度>
  

  这会在指定坐标处显示默认样式的大头针标记。如果需要自定义标记样式，可使用扩展格式：

  marker=position:<纬度>,<经度>;color:<颜色代码>;size:<尺寸>;label:<文本>
  

  各子参数说明：
  • position：必填，标记的经纬度坐标（注意是纬度在前，经度在后，和center参数顺序一致）
  • color：可选，标记颜色，支持十六进制颜色（如#FF0000）或预定义颜色名（如red）
  • size：可选，标记尺寸，可选值为small/medium/large，默认medium
  • label：可选，标记上显示的文本（最多3个字符）

修改你的请求URL #

以你提供的示例URL为例，添加标记后的完整URL如下（假设标记坐标和center一致）：

https://api.tomtom.com/map/1/staticimage?key=<TomTom_API_Key>&zoom=16&center=37.4219983,-122.084&format=jpg&layer=basic&style=main&width=600&height=300&marker=37.4219983,-122.084

更新你的Flutter代码 #

修改locationImage getter，追加marker参数，同时修正center参数的坐标顺序（TomTom API要求纬度在前、经度在后）：

String get locationImage {
  if (_pickedLocation == null) {
    return '';
  }

  final lat = _pickedLocation!.latitude;
  final lng = _pickedLocation!.longitude;

  return 'https://api.tomtom.com/map/1/staticimage?key={API_KEY}&zoom=4&center=$lat,$lng&format=jpg&layer=basic&style=main&width=600&height=300&view=Unified&language=en-GB&marker=$lat,$lng';
}

额外扩展：添加多个标记 #

如果需要在地图上添加多个标记，只需重复marker参数即可：

&marker=37.4219983,-122.084&marker=37.423,-122.085;color=blue;size=large

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