时间戳

首页 > 解决方案 > 当前位置适用于 long 和 lat 空值，但不适用于 IOS？

react-native - 当前位置适用于 long 和 lat 空值，但不适用于 IOS？

问题描述

我想在 IOS 上的地图上获取我当前的位置，但是长：null 和 lat:null，两者似乎都可以在 android 的地图上获取当前位置，但不适用于 IOS，我该怎么做才能获取当前位置在IOS上？下面是代码，例如我的初始区域是 lat:null 和 long:null，但是在 android 上我得到当前位置，但在 ios 上我没有

  class MapScreen extends Component {
  //Set the HeaderTitle screen
  static navigationOptions = props => {
    const placeName = props.navigation.getParam("placeName");
    return { headerTitle: placeName.toUpperCase() };
  };
  constructor(props) {
    super(props);
    //Initial State
    this.state = {
      lat: null,
      long: null,
      places: [],
      isLoading: false,
      placeType: "restaurant"
    };
  }
  componentDidMount() {
    console.log(this.props);
    const { navigation } = this.props;
    const placeType = navigation.getParam("placeType");
    this.setState({ placeType: placeType });

    this.getCurrentLocation();
  }

/**
   * Get current user's position
   */
  getCurrentLocation() {
    navigator.geolocation.getCurrentPosition(position => {
      const lat = position.coords.latitude;
      const long = position.coords.longitude;
      this.setState({ lat: lat, long: long });
      this.getPlaces();
    });
  }

  /**
   * Get the Place URL
   */
  getPlacesUrl(lat, long, radius, type, apiKey) {
    const baseUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?`;
    const location = `location=${lat},${long}&radius=${radius}`;
    const typeData = `&types=${type}`;
    const api = `&key=${apiKey}`;
    return `${baseUrl}${location}${typeData}${api}`;
  }

  getPlaces() {
    const { lat, long, placeType } = this.state;
    const markers = [];
    const url = this.getPlacesUrl(lat, long, 1500, placeType, GOOGLE_API_KEY);
    fetch(url)
      .then(res => res.json())
      .then(res => {
        res.results.map((element, index) => {
          const marketObj = {};
          marketObj.id = element.id;
          marketObj.name = element.name;
          marketObj.photos = element.photos;
          marketObj.rating = element.rating;
          marketObj.vicinity = element.vicinity;
          marketObj.marker = {
            latitude: element.geometry.location.lat,
            longitude: element.geometry.location.lng
          };

          markers.push(marketObj);
        });
        //update our places array
        this.setState({ places: markers });
      });
  }

  render() {
    const { lat, long, places } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.mapView}>
          <MapView
            style={{
              flex: 1
            }}
            provider={PROVIDER_GOOGLE}
            initialRegion={{
              latitude: lat,
              longitude: long,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421
            }}
          >
            {places.map((marker, i) => (
              <MapView.Marker
                key={i}
                coordinate={{
                  latitude: marker.marker.latitude,
                  longitude: marker.marker.longitude
                }}
                title={marker.name}
              />
            ))}
          </MapView>

标签： react-nativereact-native-androidreact-native-iosreact-native-maps

解决方案

你试过react-native-geolocation-service

React native geolocation service for iOS and android.

为什么 ？

创建这个库是为了尝试使用 react-native 的当前 Geolocation API 实现来修复 android 上的位置超时问题。这个库试图通过使用 Google Play 服务的新 FusedLocationProviderClient API 来解决这个问题，谷歌强烈推荐它而不是 android 的默认框架位置 API。它会根据您的请求配置自动决定使用哪个提供程序，如果它不满足您当前的请求配置，还会提示您更改位置模式。

注意：位置请求仍然会超时，因为许多 android 设备在硬件级别或系统软件级别都存在 GPS 问题。查看常见问题解答以获取更多详细信息。

推荐阅读