如何基于数组值动态设置Apple MapKit JS地图标记图标颜色？

错误原因 #

你遇到的TypeError: undefined is not an object (evaluating 'annotation.landmark')，是因为你的annotation实例上并没有landmark属性——官网示例里的annotation.landmark是示例代码特意把地标数据绑定到了annotation的landmark字段上，但你自己创建annotation时没做这个绑定，所以找不到该属性。

实现动态颜色的步骤 #

1. 确认数组数据结构 #

你的sanFranciscoLandmarks数组已经包含markerColor字段，示例结构如下：

const sanFranciscoLandmarks = [
  {
    title: "金门大桥",
    coordinate: new mapkit.Coordinate(37.8199, -122.4783),
    markerColor: "#ff0000"
  },
  {
    title: "渔人码头",
    coordinate: new mapkit.Coordinate(37.8086, -122.4107),
    markerColor: "#00ff00"
  }
];

2. 创建标注时绑定颜色数据 #

创建MKAnnotation实例时，把对应地标的markerColor存储到annotation的userData（MapKit推荐的自定义数据存储属性）里，或者直接添加自定义属性：

sanFranciscoLandmarks.forEach(landmark => {
  // 创建标注
  const annotation = new mapkit.MKAnnotation(
    landmark.coordinate,
    landmark.title
  );
  // 把颜色数据存入userData
  annotation.userData = { markerColor: landmark.markerColor };
  // 也可以直接加自定义属性：annotation.markerColor = landmark.markerColor;
  // 添加到地图
  map.addAnnotation(annotation);
});

3. 自定义标注视图时读取颜色 #

在创建自定义标注视图的回调里，从annotation的userData（或自定义属性）中读取颜色，替代原本的固定颜色：

map.addAnnotationView(function(annotation) {
  // 取自定义颜色，默认值用原来的#c969e0
  const markerColor = annotation.userData.markerColor || "#c969e0";
  return new mapkit.MarkerAnnotationView(annotation, {
    color: markerColor,
    // 其他标注配置（比如glyphText、size等）
  });
});

这样就能实现每个标记使用数组中定义的对应颜色了。

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