Блог

Главная - Вопросы по программированию - React Native | Как отображать маркеры после нажатия на кнопку (onPress())

React Native | Как отображать маркеры после нажатия на кнопку (onPress())

#javascript #android #react-native #react-native-maps

#javascript #Android #react-native #react-native-карты

Вопрос:

Я хочу создать приложение, похожее на Uber. Дело в том, что в документации react-native-maps указано только, как отображать напрямую

В моем случае я хочу, <Marker/> чтобы они отображались после onPress() (нажатия кнопки) Как этого добиться?

Я попытался изменить состояние, которое использовал <Marker/> компонент внутри <MapView> , но, похоже, оно не отображается повторно

Конструктор:

 constructor(props) {
        super(props)
        this.state = {
            updatesEnabled: false,
            location: {},
            modalCategoryVisible: false,
            markers: []
        }
    }

Дескриптор onPress:

 _searchStreetVendors = () => {
        this.setState({
            markers: [
                {
                    merchant_name: "Zaky",
                    merchant_type: "Sate",
                    merchant_info: "Selling Sate that is tasty",
                    merchant_phone: "0812909281234",
                    location: {
                        latitude: -6.667772,
                        longitude: 106.723630,
                    }
                },
            ]
        })
    }

Просмотр карты:

 render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}
                    ref={(mapView) => { _mapView = mapView; }}
                    initialRegion={{
                        latitude: -6.174969,
                        longitude: 106.827202,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }}>
                    {this.state.markers.map(marker => (
                        <MapViewMarker
                            coordinate={marker.location}
                            title={marker.title}
                            description={marker.description}
                        />
                    ))}
                </MapView>
                ...
             <View/>
}

Комментарии:

1. Что вы имеете в виду, когда говорите, что он не отображается повторно? Он будет отображаться только один раз, потому что state.markers в нем есть только одно значение.

2. @Dan я думал, что это должно быть повторно отображено, если состояние было изменено?

3. Ваш маркер никогда не изменится, потому что вы устанавливаете state.markers одно и то же значение при каждом вызове _searchStreetVendors . Вы правы, при изменении состояния это вызывает повторный рендеринг.

Ответ №1:

Два небольших изменения в вашем коде, и это маркер рендеринга для меня

 _searchStreetVendors = () => {
    this.setState({
        markers: [
            {
                merchant_name: "Zaky",
                merchant_type: "Sate",
                merchant_info: "Selling Sate that is tasty",
                merchant_phone: "0812909281234",
                key: 1,
                location: {
                    latitude: -6.174969,
                    longitude: 106.827202,
                }
            },
        ]
    })
}

<MapView
    style={styles.map}
    provider={PROVIDER_GOOGLE}
    ref={(mapView) => { _mapView = mapView; }}
    initialRegion={{
        latitude: -6.174969,
        longitude: 106.827202,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }}>
    {this.state.markers.map(marker => (
        <MapView.Marker
            coordinate={marker.location}
            title={marker.title}
            description={marker.description}
            key={marker.key}
        />
    ))}
</MapView>

1) Добавлен ключ, который необходим при отображении множественного маркера на экране, который был показан как предупреждение

2) Просмотр карты.Создатель, я обнаружил, что между текстом не было точки, которая выдавала мне ошибку

Также изменено местоположение маркера, такое же, как initialRegion, просто чтобы проверить, отображается маркер или нет, поэтому проверьте один раз и дайте мне знать, если вы все еще получаете какую-либо ошибку

Ответ №2:

Можете ли вы попробовать следующее?

И изменять параметры в функциях карты, вы используете ключи, которых нет в словаре местоположений. (marker.title и marker.description отсутствуют в словаре )

 renderMarkers() {
    return this.state.markers.map((marker) => {
      return (
        <MapViewMarker
            coordinate={marker.location}
            title={marker.merchant_name}
            description={marker. merchant_info}
        />
      )
    })
}

render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}
                    ref={(mapView) => { _mapView = mapView; }}
                    initialRegion={{
                        latitude: -6.174969,
                        longitude: 106.827202,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }}>
                    {this.state.markers.length > 0 ? this.renderMarkers() : null}
                </MapView>
                ...
             <View/>
}