如何在React Native的MapView中设置标记

I want to set a marker on MapView in React Native, but I can't find any information through official documents of MapView.
我想在React Native中的MapView上设置一个标记，但我无法通过MapView的官方文档找到任何信息。
If it is not allowed in that way, how can I use existed react module such as react-googlemaps in React Native?
如果以这种方式不允许，我怎样才能在React Native中使用现有的反应模块，例如react-googlemaps？

4 个解决方案

#1

You can set markers using the annotations prop.

您可以使用注释prop设置标记。

For example:

例如：

var markers = [
  {
    latitude: 45.65,
    longitude: -78.90,
    title: 'Foo Place',
    subtitle: '1234 Foo Drive'
  }
];

<MapView
  region={...}
  annotations={markers}
/>

#2

Thank you @naoufal. Finally I am able to display markers on map for react native IOS.

谢谢@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>

For map and container styles, I have used following styles:

对于地图和容器样式，我使用了以下样式：

 var styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    map: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    }
});

I have referred following link: React native IOS- Display Markers on map

我已经提到以下链接：React native IOS- Display Markers on map

#3

According to this issue, it's not exposed yet. You won't be able to use the web-React package either, React Native doesn't work like that.

根据这个问题，它尚未曝光。你也无法使用web-React包，React Native不能像那样工作。

Two suggestions:

两个建议：

Wait for the above issue to be resolved to get a proper API
等待上述问题得到解决，以获得正确的API
Try and use WebView to link to a Google Map with an annotation
尝试使用WebView链接到带有注释的Google Map

I'm not actually certain whether #2 is possible though.

我不确定＃2是否可行。

#4

-1

You can try webview for that-

你可以试试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>

Can use markers and other options. Hope it will help!

可以使用标记和其他选项。希望它会有所帮助！

#1