tbom/examples/src/geolocation/index.js

Taobao Open Platform Modules

import {createElement, Component} from 'rax';
import View from 'tboc-view';
import Text from 'tboc-text';
import styles from '../common/style.css';
import { geolocation } from '../../../src/index';

class GeolocationDemo extends Component {

  state = {
    isFetching: false,
    crd: {
      latitude: '',
      longitude: '',
      accuracy: ''
    }
  }

  fetch = () => {
    if (this.state.isFetching) return;
    this.setState({
      isFetching: true
    });
    geolocation.getCurrentPosition((data) => {
      console.log(data);
      this.setState({
        isFetching: false,
        crd: data.coords
      });
    }, (err) => {
      this.setState({
        isFetching: false
      });
      console.log(err);
    }, {
      enableHighAccuracy: true,
      timeout: 3000,
      maximumAge: 0
    });
  }

  render() {
    return (
      <View style={styles.app}>
        <Text>纬度: {this.state.crd.latitude}</Text>
        <Text>经度: {this.state.crd.longitude}</Text>
        <Text>精度: {this.state.crd.accuracy}</Text>
        <View clickable={true}onPress={this.fetch} onClick={this.fetch} style={demoStyles.button}>
          获取地理位置
          {
            this.state.isFetching ? "(获取中...)" : null
          }
        </View>
      </View>
    );
  }
}

const demoStyles = {
  button: {
    borderWidth: 2,
    borderColor: '#CCC',
    borderStyle: 'solid',
    paddingLeft: 20,
    paddingRight: 20,
    marginTop: 40,
    backgroundColor: '#EEE'
  }
}

export default GeolocationDemo;