#react-native #google-maps #react-native-android
#google-карты #react-native
Вопрос:
Есть ли способ создать всплывающее окно, подобное показанному ниже.
Я использую react-native-maps
, google provider
и markers
которые работают хорошо, у меня возникают проблемы только с всплывающим окном рядом с маркером
Ответ №1:
Для этого мы можем использовать Callout
компонент.
Callout
Компонент принимает пользовательский вид и является гибким в том, какой контент он принимает:
Выноски для маркеров могут быть совершенно произвольными представлениями react, аналогичными маркерам. В результате с ними можно взаимодействовать, как с любым другим представлением.
Источник:https://github.com/react-native-community/react-native-maps#custom-callouts
Итак, пример, адаптированный к вашему варианту использования, выглядит примерно так:
const CustomCalloutView = ({ marker }) => (
<View>
<View style={{ flex: 1, flexDirection: "row" }}>
<Text>Kyiv Ukraine</Text>
<Badge value="2" status="warning" />
</View>
<Text> 1°</Text>
</View>
);
// ...
<Marker coordinate={marker.latlng}>
<Callout>
<CustomCalloutView marker={{...marker}} />
</Callout>
</Marker>
Для значка я использовал значок, который предоставляет react-native-elements
библиотека (https://react-native-elements.github.io/react-native-elements/docs/badge ), но вы можете изменить это на все, что захотите.
Чтобы сделать CustomCalloutView
содержимое динамическим на основе координат маркера, переданных в качестве реквизитов, вы можете использовать функцию reverseGeocodeAsync
из expo-location
для получения информации о местоположении.
Источник:https://docs.expo.io/versions/latest/sdk/location/#locationreversegeocodeasynclocation.
Пример использования динамических координат маркера и expo-location
:
import * as Location from "expo-location";
// ...
const CustomCalloutView = ({ marker }) => {
const [location, setLocation] = useState(null);
useEffect(() => {
Location.reverseGeocodeAsync(marker).then(res => {
setLocation(res[0]);
});
}, []);
return (
<View>
{location amp;amp; (
<View>
<View style={{ flex: 1, flexDirection: "row" }}>
<Text>{`${location.city}, ${location.country}`}</Text>
<Badge value="2" status="warning" />
</View>
<Text> 1°</Text>
</View>
)}
</View>
);
};