如何为Mapbox API返回的静态地图图片标记设置自定义颜色

你之前尝试添加marker-color参数不生效，是因为该参数仅适用于使用Mapbox自带的simple marker（简单标记）叠加方式，你当前URL里用的是自定义GeoJSON点叠加，参数规则不同。

方案1：改用简单标记叠加（推荐，写法更简洁） #

直接把URL中geojson(...)的部分替换为简单标记语法，颜色直接在标记定义里设置，修改后的baseUrl代码如下：

const baseUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s+800080(${geoLocation.longitude},${geoLocation.latitude})/${geoLocation.longitude},${geoLocation.latitude},15/500x300?access_token=${MAPBOX_API_KEY}`;

这里的pin-s代表小尺寸标记，+800080就是你要的紫色（十六进制颜色去掉#号即可）。

方案2：保留GeoJSON叠加，给点要素添加样式属性 #

如果需要保留GeoJSON写法，给你的点GeoJSON添加properties字段配置标记颜色，再编码后放到URL中即可，示例代码如下：

// 构造带颜色属性的GeoJSON
const pointGeoJson = {
  type: "Point",
  coordinates: [geoLocation.longitude, geoLocation.latitude],
  properties: {
    "marker-color": "#800080"
  }
};
// 编码为URL安全字符串
const encodedGeoJson = encodeURIComponent(JSON.stringify(pointGeoJson));
const baseUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/geojson(${encodedGeoJson})/${geoLocation.longitude},${geoLocation.latitude},15/500x300?access_token=${MAPBOX_API_KEY}`;

两种方案都可以实现紫色标记的效果，直接替换你原来的baseUrl定义部分即可正常运行。

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