Как установить маркер в MapView of React Native

Я хочу установить маркер в MapView в React Native, но я не могу найти никакой информации через официальные документы MapView.
Если это не разрешено таким образом, как я могу использовать существующий реактивный модуль, например react-googlemaps в 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>

Можно использовать маркеры и другие параметры. Надеюсь, это поможет!