SHARE
TWEET

Untitled

a guest Jul 21st, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component, Fragment } from 'react';
  2. import { View, Image } from "react-native";
  3. import MapView, { Marker } from "react-native-maps";
  4. import Geocoder from 'react-native-geocoding';
  5. import { getPixelSize } from "../../utils";
  6. import Details from "../Details";
  7. import Search from "../Search";
  8. import Directions from "../Directions";
  9. import {
  10.     Back,
  11.      LocationBox,
  12.      LocationText,
  13.       LocationTimeBox,
  14.       LocationTimeText,
  15.       LocationTimeTextSmall
  16.      } from './styles';
  17.  
  18. import markerImage from "../../assets/marker.png";
  19. import backImage from "../../assets/back.png";
  20. Geocoder.init('key')
  21.  
  22. export default class Map extends Component {
  23.     state= {
  24.         region: null,
  25.         destination: null,
  26.         duration: null,
  27.         location: null,
  28.     };
  29.  
  30.     async componentDidMount() {
  31.         navigator.geolocation.getCurrentPosition(
  32.             async ({ coords: { latitude, longitude } }) => {
  33. const response = await Geocoder.from({ latitude, longitude });
  34. const address = response.results[0].formatted_address;
  35. const location = address.substring(0, address.indexOf(','));
  36.  
  37.                 this.setState({
  38.                     location,
  39.                     region: {
  40.                     latitude,
  41.                     longitude,
  42.                     latitudeDelta: 49.644183,
  43.                     longitudeDelta: 0.0134,
  44.                    
  45.                 }
  46.             })  
  47.             }, //sucesso
  48.             () => {}, //erro
  49.          {
  50. timeout: 2000,
  51. enableHighAccuracy: true,
  52. maximumAge: 1000,
  53.      }
  54.            
  55.         );
  56.     }
  57.  
  58.     handleLocationSelected = (data, { geometry }) => {
  59.         const { location: { lat: latitude, lng: longitude } } = geometry;
  60.         this.setState({
  61.             destination: {
  62.             latitude,
  63.             longitude,
  64.             title: data.structured_formatting.main_text,
  65.             },
  66.         })
  67.     }
  68. handleBack = () => {
  69. this.setState({ destination: null });
  70. };
  71.  
  72.     render() {
  73.         const { region, destination, duration, location } = this.state;
  74.         return (
  75.     <View style={{ flex: 1 }}>
  76.     <MapView
  77.     style={{ flex: 1 }}
  78.      region={region}
  79.      showsUserLocation
  80.      loadingEnabled
  81.      ref={el => this.mapView = el}
  82.      >
  83.          { destination && (
  84.              <Fragment>
  85.              <Directions
  86.              origin={region}
  87.              destination={destination}
  88.              onReady={result => {
  89.                  this.setState({ duration: Math.floor(result.duration) });
  90.  
  91.                  this.mapView.fitToCoordinates(result.coordinates, {
  92.                      edgePadding: {
  93.                          right: getPixelSize(50),
  94.                          left: getPixelSize(50),
  95.                          top: getPixelSize(50),
  96.                          bottom: getPixelSize(350)
  97.                      }
  98.              });
  99.             }}
  100.              />
  101.              <Marker
  102.              coordinate={destination}
  103.               anchor={{ x: 0, y: 0 }}
  104.                image={markerImage}
  105.                 >
  106.             <LocationBox>
  107.                 <LocationText>{destination.title}</LocationText>
  108.             </LocationBox>
  109.             </Marker>
  110.  
  111.                  <Marker
  112.              coordinate={region}
  113.               anchor={{ x: 0, y: 0 }}
  114.                >
  115.             <LocationBox>
  116.                 <LocationTimeBox>
  117.                <LocationTimeText>{duration}</LocationTimeText>
  118.                <LocationTimeTextSmall>MIN</LocationTimeTextSmall>    
  119.                 </LocationTimeBox>
  120.                 <LocationText>{location}</LocationText>
  121.             </LocationBox>
  122.             </Marker>  
  123.              </Fragment>
  124.          )}
  125.      </MapView>
  126. {destination ? (
  127.     <Fragment>
  128.         <Back onPress={this.handleBack}>
  129.             <Image source={backImage} />
  130.             </Back>
  131. <Details/>
  132. </Fragment>
  133. ) : (
  134. <Search onLocationSelected={this.handleLocationSelected} />
  135.  
  136. )}      
  137.    </View>
  138.   );
  139.  }
  140. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top