Question

我有一个我使用react-native-maps的react native应用程序。在这里，我想根据它们的坐标索引为不同的点显示不同的标记图像。但它对所有人只显示一个相同的标记。这是我现在拥有的代码：

 {this.state.coordinates.map((coordinate, index) =>
              <MapView.Marker key={`coordinate_${index}`} 
                              coordinate={coordinate} 
                              title={coordinate.title} 
                              description={coordinate.description} 
                              image={require(../assests/1.png)}>
             </MapView.Marker>
            )}

我还有更多名为2.png，3.png等的图像。如何在不同的坐标系（例如索引0）中显示这些图像，它将得到1.png。对于索引1，它将得到2.png。从这里出路是什么？

Answer 1

您正在将图像索引硬编码为1，此代码应该可以工作：

{this.state.coordinates.map((coordinate, index) =>
              <MapView.Marker key={`coordinate_${index}`} 
                              coordinate={coordinate} 
                              title={coordinate.title} 
                              description={coordinate.description} 
                              image={require(`../assests/${index}.png`)}>
             </MapView.Marker>
            )}

Answer 2

尝试此代码。我希望它能解决您的问题。

首先形成标记数组。对于Ex。

var marker1 = {
    coordinates: {
                latitude: ...,
                longitude: ...
            },
            key: MARKER1,
            image: require(../assests/1.png)
        };

var marker2 = {
            coordinates: {
                latitude: ...,
                longitude: ...
            },
            key: MARKER2,
            image: require(../assests/2.png)
        };

//将其放入标记数组

this.state.markers.push(marker1);
this.state.markers.push(marker2);

//渲染

<MapView
...
{this.state.markers.map(marker => (
                            <MapView.Marker
                                coordinate={marker.coordinates}
                                key={marker.key}>
                                <Image source={marker.image} style={width:50, height:50}/>
                            </MapView.Marker>
                        ))}
</MapView>

在反应本机地图的不同点上显示不同的标记

2 个答案: