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;
}

MapView的自定义信息窗口

1 个答案: