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

Question

• 我想在React Native中的MapView上设置一个标记,但我无法通过MapView的官方文档找到任何信息.
• 如果以这种方式不允许,我如何在React Native中使用现有的反应模块,例如react-googlemaps？

Answer 1

谢谢@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,
    }
});

我已经参考了以下链接: React native IOS- Display Markers on map

Answer 2

您可以使用道具设置标记annotations.

例如:

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

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

Answer 3

import MapView, { Marker } from 'react-native-maps';

<View>
    <MapView
    style={styles.mapStyle}
    initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
    }}
    >
        <Marker coordinate = {{latitude: 37.78825,longitude: -122.4324}}
         pinColor = {"purple"} // any color
         title={"title"}
         description={"description"}/>
    </MapView>
</View>