当我在react-native-maps中使用onPress按下地图时,如何渲染多个标记?和奖金我如何将它存储在 firebase 上?
你好,我是新来的,我是react-native-maps的新手,所以我的问题是:当我在react-native-maps中使用onPress按下地图时,如何渲染多个标记?和奖金我如何将它存储在 firebase 上?
我可以用 onPress 方法做一个简单的标记,但我不知道如何在
我的代码中做多个标记:
import MapView, { Callout, Circle, Marker } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions, SafeAreaView } from 'react-native';
import { GooglePlacesAutocomplete, } from 'react-native-google-places-autocomplete';
import { MARKERS_DATA } from '../../lib/index';
import { locations } from '../../lib/Data';
import { test } from '../../lib/testData';
const Carte = (props) => {
const [pin, setPin] = React.useState({
latitude: 48.856614,
longitude: 2.3522219
})
const [region, setRegion] = React.useState({
latitude: 48.856614,
longitude: 2.3522219
})
const [marker, setMarker] = React.useState({
latitude: 1,
longitude: 1
})
const [loc, setloc] = React.useState({
key: 0,
latitude: 48.856614,
longitude: 2.3522219,
})
return (
<SafeAreaView style={{ flex: 1 }}>
<GooglePlacesAutocomplete
placeholder="Search"
fetchDetails={true}
GooglePlacesSearchQuery={{
rankby: "distance"
}}
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details)
setRegion({
latitude: details.geometry.location.lat,
longitude: details.geometry.location.lng,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
})
}}
query={{
key: "Your api key",
language: "fr",
components: "country:fr",
types: "establishment",
radius: 30000,
location: `${region.latitude}, ${region.longitude}`
}}
styles={{
container: { flex: 0, position: "absolute", width: "100%", zIndex: 1 },
listView: { backgroundColor: "white" }
}}
/>
<MapView
style={styles.map}
initialRegion={{
latitude: 48.856614,
longitude: 2.3522219,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
onPress={(e) => {
setloc({
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude,
key: loc.key + 1
})
console.log("Pin Manuel", loc)
}}
provider="google"
>
<Marker coordinate={{ latitude: loc.latitude, longitude: loc.longitude }} draggable={true} pinColor="blue" key={loc.longitude, loc.latitude} />
<Circle center={loc} radius={500} fillColor="rgba(100,5,110,0.1)" />
{
locations.map(marker => (
<Marker coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
title={marker.title}
key={marker.key} />
))
}
{
MARKERS_DATA.map(marker => (
<Marker coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
key={marker.id} pinColor={marker.pinColor}
/>
))
}
<Marker coordinate={{ latitude: region.latitude, longitude: region.longitude }} draggable={true}
onDragStart={(e) => {
console.log("test", e.nativeEvent.coordinate)
}} />
<Marker
coordinate={pin}
pinColor="black"
draggable={true}
onDragStart={(e) => {
console.log("Drag start", e.nativeEvent.coordinate)
}}
onDragEnd={(e) => {
setPin({
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude
})
}}
>
<Callout>
<Text>I'm here</Text>
</Callout>
</Marker>
<Circle center={pin} radius={1000} />
</MapView>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
export default Carte
非常感谢!
Hi I'm new here and I'm new in react-native-maps so there is my question: How can I render mulitples Markers when i press the map with onPress in react-native-maps ? and bonus how can I store it on firebase ?
I can just do a simple marker with my onPress method and I don't know how can I do more than one marker
my code :
import MapView, { Callout, Circle, Marker } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions, SafeAreaView } from 'react-native';
import { GooglePlacesAutocomplete, } from 'react-native-google-places-autocomplete';
import { MARKERS_DATA } from '../../lib/index';
import { locations } from '../../lib/Data';
import { test } from '../../lib/testData';
const Carte = (props) => {
const [pin, setPin] = React.useState({
latitude: 48.856614,
longitude: 2.3522219
})
const [region, setRegion] = React.useState({
latitude: 48.856614,
longitude: 2.3522219
})
const [marker, setMarker] = React.useState({
latitude: 1,
longitude: 1
})
const [loc, setloc] = React.useState({
key: 0,
latitude: 48.856614,
longitude: 2.3522219,
})
return (
<SafeAreaView style={{ flex: 1 }}>
<GooglePlacesAutocomplete
placeholder="Search"
fetchDetails={true}
GooglePlacesSearchQuery={{
rankby: "distance"
}}
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details)
setRegion({
latitude: details.geometry.location.lat,
longitude: details.geometry.location.lng,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
})
}}
query={{
key: "Your api key",
language: "fr",
components: "country:fr",
types: "establishment",
radius: 30000,
location: `${region.latitude}, ${region.longitude}`
}}
styles={{
container: { flex: 0, position: "absolute", width: "100%", zIndex: 1 },
listView: { backgroundColor: "white" }
}}
/>
<MapView
style={styles.map}
initialRegion={{
latitude: 48.856614,
longitude: 2.3522219,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
onPress={(e) => {
setloc({
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude,
key: loc.key + 1
})
console.log("Pin Manuel", loc)
}}
provider="google"
>
<Marker coordinate={{ latitude: loc.latitude, longitude: loc.longitude }} draggable={true} pinColor="blue" key={loc.longitude, loc.latitude} />
<Circle center={loc} radius={500} fillColor="rgba(100,5,110,0.1)" />
{
locations.map(marker => (
<Marker coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
title={marker.title}
key={marker.key} />
))
}
{
MARKERS_DATA.map(marker => (
<Marker coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
key={marker.id} pinColor={marker.pinColor}
/>
))
}
<Marker coordinate={{ latitude: region.latitude, longitude: region.longitude }} draggable={true}
onDragStart={(e) => {
console.log("test", e.nativeEvent.coordinate)
}} />
<Marker
coordinate={pin}
pinColor="black"
draggable={true}
onDragStart={(e) => {
console.log("Drag start", e.nativeEvent.coordinate)
}}
onDragEnd={(e) => {
setPin({
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude
})
}}
>
<Callout>
<Text>I'm here</Text>
</Callout>
</Marker>
<Circle center={pin} radius={1000} />
</MapView>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
export default Carte
Thanks a lot !
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论