Пользовательское информационное окно для MapView - PullRequest
0 голосов
/ 10 октября 2018

Я создаю приложение для устройств iOS с React-native и использую MapView из экспозиции для рисования карты.Я не знаю, как добавить свое собственное окно, которое в идеале будет иметь две строки текстовых данных.Кто-нибудь знает, как настроить информационное окно в React-native?

Спасибо.

1 Ответ

0 голосов
/ 10 октября 2018

После еще одного исследования я обнаружил, что могу использовать 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;
}
...