- Я хочу установить маркер в MapView в React Native, но я не могу найти никакой информации через официальные документы MapView.
- Если это не разрешено таким образом, как я могу использовать существующий реактивный модуль, например react-googlemaps в React Native?
Как установить маркер в MapView of React Native
Ответ 1
Вы можете установить маркеры с помощью annotations
опоры.
Например:
var markers = [
{
latitude: 45.65,
longitude: -78.90,
title: 'Foo Place',
subtitle: '1234 Foo Drive'
}
];
<MapView
region={...}
annotations={markers}
/>
Ответ 2
Спасибо @naoufal. Наконец, я могу отображать маркеры на карте для реагирования на родную IOS.
<View style={styles.container}>
<MapView style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0,
longitudeDelta: 0.0,
}}
>
<MapView.Marker
coordinate={{latitude: 37.78825,
longitude: -122.4324}}
title={"title"}
description={"description"}
/>
</MapView>
</View>
Для стилей карт и контейнеров я использовал следующие стили:
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}
});
Я ссылался на следующую ссылку: Изменить локальные маркеры IOS-Display на карте
Ответ 3
В соответствии с этот вопрос, он пока не отображается. Вы также не сможете использовать пакет Web-React, React Native не работает.
Два предложения:
- Подождите, пока проблема будет решена, чтобы получить правильный API
- Попробуйте использовать WebView для ссылки на Google Map с аннотацией
На самом деле я не уверен, возможно ли # 2.
Ответ 4
Вы можете попробовать webview для этого -
var html = '<!DOCTYPE html><html><body><div "class="google-maps"
style="position:absolute; bottom:0px; overflow:hidden; height:100%; left:0px; width:100%"><iframe frameborder="0" width="100%" height="120%" style="margin-top:-30%;" scrolling="no" src="https://www.google.com/maps/embed/v1/place?key=yourKEY &q=Space+Needle,Seattle+WA" allowfullscreen> </iframe> </google-maps></body></html>';
return (
<View style={styles.container}>
<WebView html={html}/>
</View>
Можно использовать маркеры и другие параметры. Надеюсь, это поможет!