android - react-native 获取当前位置

问题描述

我尝试使用 react-native-maps 并获取我当前的位置。我不仅尝试使用“react-native-geolocation-service”和“@react-native-community/geolocation”。地图仍然显示谷歌总部可能在旧金山。({"coords": {"accuracy": 20, "altitude": 5, "heading": 0, "latitude": 37.4219983, "longitude": -122.084, "speed": 0}, "mocked": false ，“时间戳”：1577294172000}）

如何在我的 android 模拟器（Pixel_2 和 Pixel_3）中加载我的当前位置。请回答我...我已经摔跤一个多星期了...

下面是我的包裹。

  "dependencies": {
    "@react-native-community/geolocation": "^2.0.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-android-location-enabler": "^1.2.0",
    "react-native-geolocation-service": "^3.1.0",
    "react-native-maps": "0.26.1"
  },



import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, Alert, TextInput,
  TouchableWithoutFeedback, 
  TouchableHighlight, TouchableOpacity,
  Keyboard, ScrollView, PermissionsAndroid,
} from 'react-native';

import MapView, {Marker}  from 'react-native-maps';
import Geolocation from 'react-native-geolocation-service';
// import Geolocation from '@react-native-community/geolocation';
import RNAndroidLocationEnabler from 'react-native-android-location-enabler';

Geolocation.getCurrentPosition(
  (position) => {
      console.log(position);
  },
  (error) => {
      // See error code charts below.
      console.log(error.code, error.message);
  },
  { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);


export default class App extends Component {


  render() {
    return (

        <View style={styles.container}>


        <MapView

          minZoomLevel={6}
          maxZoomLevel={16}
          // mapType="none"
          style={styles.map}
          initialRegion={{

            // latitude: this.state.location.coords.latitude,
            // longitude: this.state.location.coords.longitude,
            latitude: 37.4219983,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>


               <Marker
          coordinate={{latitude: 37.78825, longitude: -122.4324}}
          title="this is a marker"
          description="this is a marker example"
        />


        </MapView>
        <Text style={styles.SampleHeader}>
             GUDUGUDU ^^  
             </Text>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  SampleHeader: {
    // flex: 3,
    // flexDirection: 'column',
    backgroundColor: '#d9d9d9',
    // width: 90,
    paddingTop: 0,
    paddingBottom: 5,
    marginLeft: 15,
    marginRight: 15,
    marginTop: 5,
    marginBottom: 5,
    textAlign: "center",
    // fontFamily: 'Cochin',
    fontSize: 22,
    fontWeight: '300',
    color: 'black',
    padding: 5,
    borderRadius: 10,
  },
  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,
  },


});
'''

标签： androidreact-nativereact-native-mapscurrentlocation

android - react-native 获取当前位置

问题描述

解决方案

推荐阅读