地图视图的自定义信息窗口

Question

我正在使用React-native为iOS设备构建一个应用程序，我使用expo的MapView绘制地图。我不知道如何添加我自己的自定义窗口，理想情况下它将有两行文本数据。 有谁知道如何在 React-native 中自定义信息窗口？

谢谢。

Answer 1

经过更多的研究，我发现我可以使用MapView.Callout来定义我自己的自定义信息窗口。代码如下：

getMarkers = () => {
let markers = this.state.data.map((marker, index) => {
let magnitude = marker.magnitude;
let icon = undefined;
if(magnitude < 4.0)
{
icon = require('./assets/image_earthquakes_one.png')
}
else if(magnitude >= 4.0 & magnitude <= 5.0)
{
icon = require('./assets/image_earthquakes_two.png')
}
else if(magnitude > 5.0)
{
icon = require('./assets/image_earthquakes_three.png')
}
return ( <MapView.Marker coordinate = {
{
latitude: Number(marker.latitude),
longitude: Number(marker.longitude)
}
}
image = {
icon
}
key = {
index
}
>
<MapView.Callout>
<View>
<Text>Lat:{marker.latitude}, Lon:{marker.longitude}</Text>
<Text>Magnitude:{marker.magnitude}, Depth:{marker.depthkm}</Text>
</View>
</MapView.Callout>
</MapView.Marker>
);
});
return markers;
}