Javascript 如何在 React Native 的 MapView 中设置标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29412753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set a marker in MapView of React Native
提问by ivan wang
- I want to set a marker on MapView in React Native, but I can't find any information through official documents of MapView.
- If it is not allowed in that way, how can I use existed react module such as react-googlemapsin React Native?
- 我想在 React Native 中在 MapView 上设置一个标记，但是通过MapView 的官方文档找不到任何信息。
- 如果这种方式不允许，我如何在 React Native 中使用现有的React模块，例如react-googlemaps？
回答by BK19
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
回答by naoufal
You can set markers using the annotationsprop.
您可以使用道具设置标记annotations。
For example:
例如：
var markers = [
{
latitude: 45.65,
longitude: -78.90,
title: 'Foo Place',
subtitle: '1234 Foo Drive'
}
];
<MapView
region={...}
annotations={markers}
/>
回答by Colin Ramsay
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
- Try and use WebView to link to a Google Map with an annotation
- 等待以上问题解决，获取合适的API
- 尝试使用 WebView 链接到带有注释的 Google 地图
I'm not actually certain whether #2 is possible though.
不过，我实际上不确定 #2 是否可行。
回答by Narayan Shrestha
import MapView from 'react-native-maps';
<View style={StyleSheet.absoluteFillObject}>
<MapView style={styles.map}
showsUserLocation //to show user current location when given access
loadingEnabled //to show loading while map loading
style={styles.map}
initialRegion={{
latitude,
longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
{
locations && locations.map((location, index) => {
const {
coords: { latitude, longitude }
} = location;
return (
<MapView.Marker
key={index}
coordinate={{ latitude, longitude }}
title={"title"}
description={"address"}
// onPress={this.onMarkerPress(location)}
/>
)
})
}
</MapView>
</View>```
const styles = StyleSheet.create({
const 样式 = StyleSheet.create({
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}
});
});
"dependencies": { "native-base": "^2.13.8", "react": "16.9.0", "react-native": "0.61.2", "react-native-maps": "git+https://[email protected]/react-native-community/react-native-maps.git" },
"dependencies": { "native-base": "^2.13.8", "react": "16.9.0", "react-native": "0.61.2", "react-native-maps": "git+ https://[email protected]/react-native-community/react-native-maps.git" },
Try using this. Hope it helps to mark for many locations. Happy Coding.
回答by Kishan Madhwani
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>
