react-native 不使用 react-native-geolocation-service 更新 MapView initialRegion

Question

我想更新我的地图以显示用户位置。使用下面的代码，我得到了一张世界地图而不是英国地图，这是应该显示的纬度和经度，有人能帮忙吗？

  const [location, setLocation] = useState({
    initialPosition: {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0,
      longitudeDelta: 0,
    },
  });

  const getLocationPermissions = async () => {
    const granted = await request(
      Platform.select({
        android: PERMISSIONS.ANDROID.ACCESS_COARSE_LOCATION,
        ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
      }),
      {
        title: 'DemoApp',
        message: 'App would like access to your location ',
      }
    );

    return granted === RESULTS.GRANTED;
  };

  useEffect(() => {
    //  check permission
    const isGranted = getLocationPermissions();

    if (isGranted) {
   // get location 
      Geolocation.getCurrentPosition((info) => {
        let lat = info.coords.latitude;
        let long = info.coords.longitude;
   // update state with location,latitude: 52.62869394486038
   //longitude: -1.9794797216434805
        var initialRegion = {
          latitude: lat,
          longitude: long,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        };
      });
    } else {
      console.log('error');
    }
  }, []);

  return (
    <View style={styles.container}>
      <MapView style={styles.map} initialRegion={location.initialPosition} />
    </View>
  );

Answer 1

我猜你正在使用 react-native-maps MapView 组件，它有一个 showsUserLocation 布尔值属性.

<MapView 
style={styles.map}
showsUserLocation={true} 
initialRegion={location.initialPosition} 
/>

也许这样可以解决问题？

Answer 2

从设备检索用户位置后，动画映射到该区域。

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import MapView from "react-native-maps";

const App = () => {
  const mapRef = React.useRef(null);

  React.useEffect(() => {
    // Below are mocked location in UK. Retrieve real location
    // from device with Geoocation API

    // latitude: 52.62869394486038
    //longitude: -1.9794797216434805
    const userRegion = {
      latitude: 52.62869394486038,
      longitude: -1.9794797216434805,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    };

    mapRef.current?.animateToRegion(userRegion);
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        ref={mapRef}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        style={styles.mapStyle}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 10,
    backgroundColor: "#ecf0f1",
  },
  mapStyle: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default App;

工作示例小吃。

https://snack.expo.dev/@emmbyiringiro/9f04a3

react-native 不使用 react-native-geolocation-service 更新 MapView initialRegion

react-native not updating MapView initialRegion with react-native-geolocation-service

javascript

react-native

geolocation