latlng不能为null - 需要一个位置

时间:2017-05-29 11:44:53

标签: javascript react-native react-native-android

import {Container,Header, Item, Input, Icon, Button, Left, Right, Content, Footer, FooterTab, Body, Title, Text } from 'native-base';
import MapView from 'react-native-maps';
import React, { Component } from 'react';
import {AppRegistry,StyleSheet,View,Dimensions} from 'react-native';

const { width, height } = Dimensions.get('window')
const ASPECT_RATIO = width / height;
const LATITUDE = 51.023033;
const LONGITUDE = 10.3621663;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

export default class Shop extends Component {

constructor(props) {
    super(props);

    this.state = {
        initialPosition: {
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.042,

        },
        makerPosition: {
            latitude: 37.78825,
            longtitude: -122.4324,
        }
    }
}
watchID: ?number = null

componentDidMount() {

    navigator.geolocation.getCurrentPosition(
        (position) => {
            var lat = parseFloat(position.coords.latitude)
            var longi = parseFloat(position.coords.longitude)
            var initialRegion = {
                latitude: lat,
                longitude: longi,
                longitudeDelta: LONGITUDE_DELTA,
                latitudeDelta: LATITUDE_DELTA
            }
            this.setState({ initialPosition: initialRegion })
            this.setState({ makerPosition: initialRegion })
        },
        (error) => alert(JSON.stringify(error)),
        { enableHighAccuracy: true, timeout: 20000, 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,
            longitudeDelta: LONGITUDE_DELTA,
            latitudeDelta: LATITUDE_DELTA

        }
        this.setState({ initialPosition: lastRegion })
        this.setState({ makerPosition: lastRegion })
    })
}
componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID)
}

render() {
    return (
        <Container>
            <Header searchBar rounded>
                <Item>
                    <Icon name="ios-search" />
                    <Input placeholder="Search" />
                    <Icon name="ios-people" />
                </Item>
                <Button transparent>
                    <Text>Search</Text>
                </Button>
            </Header>
            <View style={styles.container}>
                <MapView
                    showsUserLocation={true}
                    style={styles.map}
                    region={this.state.initialPosition}>
                    <MapView.Marker coordinate={this.state.markerPosition}>
                        <View style={styles.radius}>
                            <View style={styles.marker}>
                            </View>
                        </View>
                    </MapView.Marker>
                </MapView>
            </View>
            <View>

            </View>
        </Container>

    );
}
}

const styles = StyleSheet.create({
    radius: {
        height: 50,
        width: 50,
        borderRadius: 50 / 2,
        overflow: 'hidden',
        backgroundColor: 'rgba(10,122,255,0.1)',
        borderWidth: 1,
        borderColor: 'rgba(0,122,255,0.3)',
        alignItems: 'center',
        justifyContent: 'center'
    },
    marker: {
        height: 20,
        width: 20,
        borderWidth: 3,
        overflow: 'hidden',
        backgroundColor: 'red',
        borderColor: 'white',
        borderRadius: 20 / 2
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2c3e50',
    },

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

});
AppRegistry.registerComponent('Shop', () => Shop);

这是代码,似乎是latlang中的错误是null。帮我解决这个问题。我使用Android手机运行此功能,我已经在AndroidManifest中添加了位置权限。

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

Error

0 个答案:

没有答案