如何使用react-native-maps获取当前位置

Question

我正在尝试在安卓设备上使用react-native maps将地图渲染到当前用户的地理位置。

这是我目前已经完成的内容：

import React, { Component } from 'react';

import {
  View,
  StyleSheet,
  Dimensions,
} from 'react-native';

import MapView from 'react-native-maps';

const {width, height} = Dimensions.get('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

class MapComponent extends Component {
  constructor() {
    super()
    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0,
      },
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)

      var initialRegion = {
        latitude: lat,
        longitude: long,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }

      this.setState({initialPosition: initialRegion})
    },
    (error) => alert(JSON.stringify(error)),
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000});
  }


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

  render() {
    return (
      this.renderScreen()
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

export default MapComponent;

地图已经呈现出来了，但不是在当前设备的地理位置，而是如预期地在海洋中央呈现。

权限已经在AndroidManifest.xml文件中设置为：

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

20秒后，我收到一个警报，显示“位置请求超时”，代码为3。

我做错了什么？

- MacFlyer

---

Geolocation.getCurrentPosition((info) => { let lat = info.coords.latitude; let long = info.coords.longitude; console.log(lat); console.log(long); var initialRegion = { latitude: lat, longitude: long, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }; this.setState({ initialPosition: initialRegion }); }); - GUGAN RAJ

使用这个函数，它会解决你的问题。 - GUGAN RAJ

Answer 1

我不确定，但有一个问题（“Geolocation timed out, code 3”）看起来与此相关

对于在Android上遇到这个问题的其他人，请尝试删除最大年龄：2000选项参数。这个选项会导致地理定位超时或使应用程序崩溃。

- Mikhail Aksenov

Answer 2

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';

const App = () => {
  const [position, setPosition] = useState({
    latitude: 10,
    longitude: 10,
    latitudeDelta: 0.001,
    longitudeDelta: 0.001,
  });

  useEffect(() => {
    Geolocation.getCurrentPosition((pos) => {
      const crd = pos.coords;
      setPosition({
        latitude: crd.latitude,
        longitude: crd.longitude,
        latitudeDelta: 0.0421,
        longitudeDelta: 0.0421,
      });
    }).catch((err) => {
      console.log(err);
    });
  }, []);

  return (
    <MapView
      style={styles.map}
      initialRegion={position}
      showsUserLocation={true}
      showsMyLocationButton={true}
      followsUserLocation={true}
      showsCompass={true}
      scrollEnabled={true}
      zoomEnabled={true}
      pitchEnabled={true}
      rotateEnabled={true}>
       <Marker
       title='Yor are here'
       description='This is a description'
       coordinate={position}/>
       </MapView>
  );
};

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});


export default App;

- Thaiyalnayaki

---

这个可以工作。还需要添加权限： <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> - gsm

Answer 3

在我的电脑上它运行得非常完美。我所做的唯一更改是在StyleSheet中。

container: {
    position: 'absolute',
    height : SCREEN_HEIGHT,
    width : SCREEN_WIDTH,
    justifyContent: 'flex-end',
    alignItems: 'center',
}

此后，它会呈现我的位置。之后，您可以添加标记以显示您的位置。

- Harsh Vishnoi

Answer 4

navigator.geolocation.getCurrentPosition()已被弃用。
请使用@react-native-community/geolocation代替。

npm install @react-native-community/geolocation --save

- Kavidu Aloka Kodikara

---

"react-native-geolocation-service"非常优秀。 - ggDeGreat

“@react-native-community/geolocation” 似乎已经被弃用，请为 @ggDeGreat 点赞。 - Daniel Danielecki

Answer 5

这是对我有效的方法。第三个选项是导致问题的原因。

navigator.geolocation.getCurrentPosition() =>{

},
 err => {

},
{ enableHighAccuracy: false, timeout: 20000}, //this worked for me

- Speedy11

Answer 6

import React, { Component } from "react";
// global.currentScreenIndex = 'Dashboard';
//Import all required component
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  Modal,
  TouchableHighlight,
  StatusBar,
  FlatList,
  ActivityIndicator,
  Button,
  NetInfo,
} from "react-native";
import MapView, { Marker } from "react-native-maps";
import Geolocation from "@react-native-community/geolocation";

const MyStatusBar = ({ backgroundColor, ...props }) => (
  <View style={[styles.statusBar, { backgroundColor }]}>
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
  </View>
);
   

class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0,
      },
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    Geolocation.getCurrentPosition((info) => {
      let lat = info.coords.latitude;
      let long = info.coords.longitude;

      console.log(lat);
      console.log(long);
      var initialRegion = {
        latitude: lat,
        longitude: long,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      };
      this.setState({ initialPosition: initialRegion });
    });
  }

  render() {
    const { modalVisible } = this.state;
    const { navigate } = this.props.navigation;
    // const token_data = token_value();
    // console.log("token_homes_2st"+token_data);

    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={this.state.initialPosition}
          showsUserLocation={true}
        />
      </View>
    );
  }
}
export default Dashboard;

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    fontWeight: "400",
    color: "#000",
    fontFamily:
      "Inter UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif",
  },

  map: {
    height: 400,
    width: 400,
    justifyContent: "flex-end",
    alignItems: "center",
  },
});

- GUGAN RAJ

---

请阅读[答案]并[编辑]您的答案，以包含有关此代码实际解决问题的说明。请记住，您不仅要解决问题，还要教育OP和任何未来读者。 - Adriaan

Answer 7

1.安装npm install @react-native-community/geolocation --save
2.从'@react-native-community/geolocation'导入Geolocation;
3.navigator.geolocation.getCurrentPosition => Geolocation.getCurrentPosition

- zachee

---

如果您能更详细地解释所描述的步骤如何帮助回答问题，那就太好了。 - Gregor Koukkoullis