在React Native Maps中设置用户平移限制

时间:2018-07-08 20:34:08

标签: react-native react-native-maps

我试图限制从React Native Maps使用Mapview时用户可以平移多少。用户没有理由在城市外平移,我相信在城市外平移的用户越多-我每天的请求分配量就越多。

我尝试使用Mapview方法setMapBoundaries(),但这似乎不起作用。有人知道我该怎么控制吗?

export class MapOfHalifax extends React.Component {

constructor(args) {
    super(args);
    this.state = {
        markers: this.props.markers,
        latitude: null,
        longitude: null,
        error: null,
    }
}

componentDidMount() {

    this.map.setMapBoundaries(

        northEast = {
            latitude: 44.722476,
            longitude: -63.554658,
        },southWest = {
            latitude: 44.600546,
            longitude: -63.613286,
        }
    )
}

componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchId);
    navigator.geolocation.stopObserving();
}
toggleSelect(id) {
    this.props.toggleMarkerState(id)
}

checkDistanceFromSignificantLocation(currentPosition) {
    this.state.markers.map((marker, index) => {
        const START = {
            latitude: currentPosition.coords.latitude,
            longitude: currentPosition.coords.longitude
        }
        const END = {
            latitude: marker.latitude,
            longitude: marker.longitude
        }
        if (haversine(START, END, { threshold: MAX_DISTANCE_FROM_LOCATION, unit: PREFERED_DISTANCE_UNIT })
            && (!this.props.markers[index].locationPassedBy)){
            this.props.updatePassedByTime(index, moment.utc())
            NotificationsAndroid.localNotification({
                title: "Approaching:",
                body: marker.name + "!"
            });

        } else if (haversine(START, END, { threshold: MAX_DISTANCE_FROM_LOCATION, unit: PREFERED_DISTANCE_UNIT })
        && (moment().diff(this.props.markers[index].locationPassedBy,'minutes') > 60)){
            NotificationsAndroid.localNotification({
                title: "Approaching:",
                body: marker.name + "!"
            });
        }
    });
}

render() {
    return (
        <View style={styles.container}>
            <MapView
                ref={ref => { this.map = ref; }}
                showsUserLocation={true}
                showsMyLocationButton={true}
                style={styles.map}
                initialRegion={{
                    latitude: LATITUDE,
                    longitude: LONGITUDE,
                    latitudeDelta: LATITUDE_DELTA,
                    longitudeDelta: LONGITUDE_DELTA,
                }}>
                {this.props.markers.map((marker, index) => {
                    return (<MapView.Marker
                        coordinate={{
                            latitude: parseFloat(marker.latitude),
                            longitude: parseFloat(marker.longitude)
                        }}
                        title={marker.name}
                        key={marker.id}
                        onPress={() => {
                            const marker = this.state.markers[index]
                            marker.mapMarkerIsSelected = !marker.mapMarkerIsSelected
                            this.setState({
                                markers: [
                                    ...this.state.markers.slice(0, index),
                                    marker,
                                    ...this.state.markers.slice(index + 1)
                                ]
                            })
                            this.props.toggleMarkerState(marker.id)
                        }}
                        pinColor={
                            marker.mapMarkerIsSelected ? '#3590ea' : '#f06f77'
                        }>
                    </MapView.Marker>)
                })}
            </MapView>
        </View>
    );
}
}

0 个答案:

没有答案