google-maps - MapView 的自定义信息窗口

Question

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

谢谢你。

标签： google-mapsreact-nativeexpoinfowindow

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