Question

我想制作一张地图，用户也可以选择他的当前位置，并且可以从他当前的位置之外的其他位置中选择位置...但是我遇到了此错误...查看者：AIRMap null经度” ......在这里，我也附上了地图类代码...请帮助我

 import React from 'react';

    import PropTypes from 'prop-types';

    import { View, StyleSheet, Animated, Platform, UIManager, TouchableOpacity, Text, ViewPropTypes } from 'react-native';


    import MaterialIcons from 'react-native-vector-icons/MaterialIcons';


    import Entypo from 'react-native-vector-icons/Entypo';

    import axios from 'axios';

    import Events from 'react-native-simple-events';

    import MapView from 'react-native-maps';


    import AutoCompleteInput from './AutoCompleteInput'

    const PLACE_DETAIL_URL = 'https://maps.googleapis.com/maps/api/place/details/json';
    const DEFAULT_DELTA = { latitudeDelta: 0.015, longitudeDelta: 0.0121 };


    export default class Map extends React.Component {

     static propTypes = {
        apiKey:"AIzaSyCqDF-mH8qkUQ4z0qB1exxxxxxI0FYRACs",

        initialLocation: PropTypes.shape({
          latitude: PropTypes.number,
          longitude: PropTypes.number,
        }).isRequired,
        markerColor: PropTypes.string,

        actionButtonStyle: ViewPropTypes.style,
        actionTextStyle: Text.propTypes.style,
        actionText: PropTypes.string,
        onLocationSelect: PropTypes.func,
        debounceDuration: PropTypes.number,

        components: PropTypes.arrayOf(PropTypes.string),
      };

      static defaultProps = {
        markerColor: 'black',

        actionText: 'DONE',

        onLocationSelect: () => ({}),

        debounceDuration: 300,

        components: [],

      };

      constructor(props) {
        super(props);

        if (Platform.OS === 'android')
     {
          UIManager.setLayoutAnimationEnabledExperimental && 
    UIManager.setLayoutAnimationEnabledExperimental(true);
        }
      }

      componentDidMount() {
        Events.listen('InputBlur', this.constructor.displayName, this._onTextBlur);
        Events.listen('InputFocus', this.constructor.displayName, this._onTextFocus);
        Events.listen('PlaceSelected', this.constructor.displayName, this._onPlaceSelected);
      }

      componentWillUnmount() {
        Events.rm('InputBlur', this.constructor.displayName);
        Events.rm('InputFocus', this.constructor.displayName);
        Events.rm('PlaceSelected', this.constructor.displayName);
      }

      state = {
        inputScale: new Animated.Value(1),
        inFocus: false,
        region: {
          ...DEFAULT_DELTA,
          ...this.props.initialLocation,

        },
      };

      _animateInput = () => {
        Animated.timing(this.state.inputScale, {
          toValue: this.state.inFocus ? 1.2 : 1,
          duration: 300,
        }).start();
      };

      _onMapRegionChange = region => {
        this._setRegion(region, false);
        if (this.state.inFocus) {
          this._input.blur();
        }
      };

      _onMapRegionChangeComplete = region => {
        this._input.fetchAddressForLocation(region);
      };

      _onTextFocus = () => {
        this.state.inFocus = true;
        this._animateInput();
      };

      _onTextBlur = () => {
        this.state.inFocus = false;
        this._animateInput();
      };

      _setRegion = (region, animate = true) => {
        this.state.region = { ...this.state.region, ...region };
        if (animate) this._map.animateToRegion(this.state.region);
      };

      _onPlaceSelected = placeId => {
        this._input.blur();
        axios.get(`${PLACE_DETAIL_URL}?key=${this.props.apiKey}&placeid=${placeId}`).then(({ data }) => {
          let region = (({ lat, lng }) => ({ latitude: lat, longitude: lng }))(data.result.geometry.location);
          this._setRegion(region);
        });
      };

      _getCurrentLocation = () => {
        navigator.geolocation.getCurrentPosition(position => {
          let location = (({ latitude, longitude }) => ({ latitude, longitude }))(position.coords);
          this._setRegion(location);
        });
      };

      render() {
        let { inputScale } = this.state;
        return (
          <View style={styles.container}>
            <MapView
              ref={mapView => (this._map = mapView)}
              style={styles.mapView}
              region={this.state.region}
              showsMyLocationButton={true}
              showsUserLocation={false}
              onPress={({ nativeEvent }) => this._setRegion(nativeEvent.coordinate)}
              onRegionChange={this._onMapRegionChange}
              onRegionChangeComplete={this._onMapRegionChangeComplete}
            />
            <Entypo
              name={'location-pin'}
              size={30}
              color={this.props.markerColor}
              style={{ backgroundColor: 'transparent' }}
            />
            <View style={styles.fullWidthContainer}>
              <AutoCompleteInput
                ref={input => (this._input = input)}
                apiKey={this.props.apiKey}
                style={[styles.input, { transform: [{ scale: inputScale }] }]}
                debounceDuration={this.props.debounceDuration}
                components={this.props.components}
              />
            </View>
            <TouchableOpacity
              style={[styles.currentLocBtn, { backgroundColor: this.props.markerColor }]}
              onPress={this._getCurrentLocation}
            >
              <MaterialIcons name={'my-location'} color={'white'} size={25} />
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.actionButton, this.props.actionButtonStyle]}
              onPress={() => this.props.onLocationSelect({ ...this.state.region, address: this._input.getAddress() })}
            >
              <View>
                <Text style={[styles.actionText, this.props.actionTextStyle]}>{this.props.actionText}</Text>
              </View>
            </TouchableOpacity>
            {this.props.children}
          </View>
        );
      }
    }

Answer 1

如果使用showsUserLocation道具，则需要将ACCESS_FINE_LOCATION权限添加到AndroidManifest.xml中

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

希望这会有所帮助！

Answer 2

首先设置默认区域，以使其在启动时不会崩溃。

const LATITUDE = 40.665364;
const LONGITUDE = -74.213377;
const LATITUDE_DELTA = 0.0043;
const LONGITUDE_DELTA = 0.0034;

set region支持默认值this.state.region，该值为null，这会导致此错误，请尝试在状态中添加其默认值。像这样

state = {
    region:{
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }
}



<MapView
          ref={map => (this.map = map)}
          customMapStyle={uber_style}
          initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }}
          region={this.state.region}
          onMapReady={this.onMapLayout}
          maxZoomLevel={this.state.maxZoomLevel}
          provider={PROVIDER_GOOGLE}
          loadingIndicatorColor="#e21d1d"
          style={{
            flex: 1,
            width: Metrics.screenWidth,
            height: Metrics.screenHeight
          }}
          showsBuildings={true}
          loadingEnabled={true}
          //   showsUserLocation={true}
          onRegionChangeComplete={this.onRegionChangeComplete}
        >

Answer 3

下面是我的示例代码：

 var coords = this.props.navigation.state.params.locationvalue; //getting location from props.
            try {
                this.map.animateToRegion({
                    ...this.state.locationArea,
                    latitude: coords.latitude,
                    longitude: coords.longitude
                });
                this.setState(prevState => {
                    return {
                        locationArea: {
                            ...prevState.locationArea,
                            latitude: coords.latitude,
                            longitude: coords.longitude
                        }
                    };
                });
            } catch (error) {
                console.log("error map.animateRegion(): " + JSON.stringify(error))
            }

在这里，使用this.map.animateToRegion方法传递的纬度和经度值错误。

在将animateToRegion与MapView一起使用时，您可以检查所传递的纬度和经度的确切值。我希望此解决方案有帮助。

Answer 4

对我来说，问题是 typo 错误。区域 lat 和 long 位于 string 中。此外，它不应该是 blank 或 undefined 。

您可以使用 Number 或 parseFloat 进行解析。

 const LATITUDE = '70.664'; //type string
 const LONGITUDE = '-58.23077';

解决这个问题是：

region:{
    latitude: parseFloat(LATITUDE), //or Number(LATITUDE)
    longitude: parseFloat(LONGITUDE),
    latitudeDelta: 0.02,
    longitudeDelta: 0.02,
  }

在更新由AIRMap空经度管理的视图的属性“区域”时发生错误。

4 个答案: