为什么谷歌地图向我显示用户位置错误?

时间:2018-01-10 13:58:22

标签: javascript reactjs google-maps debugging react-native

根据我的代码,Google Maps显示用户的位置(用蓝色标记表示)在旧金山(我在纽约)。为什么不显示用户的当前位置?我在代码的latitudelongitude部分中未包含任何手动坐标。这一切都充满活力。

为什么这样做?

这是App.js档案:

import React, { Component } from 'react';
import { StyleSheet, View, TextInput, Dimensions } from 'react-native';
import { Input, SearchBarSection } from './src/components/common';
import RetrievePlaces from './src/components/common/RetrievePlaces';
import MapView from 'react-native-maps';

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

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

export default class App extends Component<{}> {
  constructor(props) {
    super(props);

    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0
      },

      markerPosition: {
        latitude: 0,
        longitude: 0
      }
    }
  }

  watchID: ?number = null;

  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})
      this.setState({markerPosition: initialRegion})
    },
    (error) => alert(JSON.stringify(error)),
  {enableHighAccuracy: true, timeout: 2000, maximumAge: 1000})

    this.watchID = navigator.geolocation.watchPosition((position) => {
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)

      var lastRegion = {
        latitude: lat,
        longitude: long,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }
      this.setState({initialPosition: lastRegion})
      this.setState({markerPosition: lastRegion})
    })
}

  componentWillUnmount() {navigator.geolocation.clearWatch(this.watchID)}

  render() {
    return (
        <MapView
            style={styles.map}
            region={this.state.initialPosition}>
              <SearchBarSection>
                <Input
                  placeholder={"Search.."}
                />
                <RetrievePlaces/>
              </SearchBarSection>
            <MapView.Marker
              coordinate={this.state.markerPosition}>
                <View style={styles.radius}>
                  <View style={styles.marker}/>
                </View>
            </MapView.Marker>
          </MapView>
       );
    }
}

const styles = StyleSheet.create({
  radius: {
    height: 50,
    width: 50,
    borderRadius: 50 / 2,
    overflow: 'hidden',
    backgroundColor: 'rgba(0, 122, 255, 0.1)',
    borderWidth: 1,
    borderColor: 'rgba(0, 112, 255, 0.3)',
    alignItems: 'center',
    justifyContent: 'center'
  },

  marker: {
    height: 20,
    width: 20,
    borderRadius: 3,
    borderColor: 'white',
    borderRadius: 20 / 2,
    overflow: 'hidden',
    backgroundColor: '#007AFF'
  },

  map: {
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    position: 'absolute'
  }

});

0 个答案:

没有答案