react native mapboxgl - 將數據映射到 PointAnnotation onSelected 問題

Question

我正在向我的 MapView 動態添加 PointAnnotation 組件。 這些點以正確的坐標方式添加，但是除了最后一個添加到地圖的點之外，它們都沒有保留它們的 onSelected 回調。 這是地圖功能。 . .

const markers = points.map((data, index) => { // points is an array of objects containing coordinates and names
    return (
        <MapboxGL.PointAnnotation
            key={index}
            coordinate={data["coords"]}
            onSelected={() => alert(data["name"])}
        />
    )
})

這些點使用提供的坐標正確地位於地圖上，因此映射的數據是可以的。 我不明白為什么 onSelected 只在最后添加的點觸發。

知道為什么會這樣嗎？

Answer 1

首先：您應該向 <MapboxGL.PointAnnotation /> 添加一個唯一的 id

如果注釋沒有 id，您的事件的結果將在每個索引上被覆蓋。

這就是為什么你只有最后一個

要么：

onSelect 道具帶有有效負載。 你可以嘗試這樣的事情：

const markers = points.map((data, index) => { // points is an array of objects containing coordinates and names
    return (
        <MapboxGL.PointAnnotation
            key={index}
            id={`annotation_${data.name}_${index}`}
            coordinate={data["coords"]}
            onSelected={(payload) => console.log(payload);}
        />
    )
})

你會看到你得到了什么，並使用有效負載來查找數據。

希望它會有所幫助。