当我在react-native-maps中使用onPress按下地图时,如何渲染多个标记?和奖金我如何将它存储在 firebase 上?

发布于 2025-01-10 04:46:43 字数 5357 浏览 2 评论 0原文

你好,我是新来的,我是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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文