Inteligencia Futura

React Native Trazar la ruta de un punto a otro – trace the route from one point to another


los paquetes que se usan son:
npm install react-native-maps-directions
y el paquete de mapas normal


import React, { Component } from ‘react’;
import { Dimensions, StyleSheet } from ‘react-native’;
import MapView from ‘react-native-maps’;
import MapViewDirections from ‘react-native-maps-directions’;

const { width, height } = Dimensions.get(‘window’);
const ASPECT_RATIO = width / height;
const LATITUDE = 6.2199099;
const LONGITUDE = -75.5879654;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const GOOGLE_MAPS_APIKEY = ‘GOOGLE_MAPS_APIKEY’;

class Example extends Component {

constructor(props) {
super(props);

// AirBnB’s Office, and Apple Park
this.state = {
coordinates: [
{
latitude: 6.2330135,
longitude: -75.6045279,
},
{
latitude: 6.2257616,
longitude: -75.5985998,
},
],
};

this.mapView = null;
}

onMapPress = (e) => {
this.setState({
coordinates: [
…this.state.coordinates,
e.nativeEvent.coordinate,
],
});
}

render() {
return (
<MapView
initialRegion={{
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
style={StyleSheet.absoluteFill}
ref={c => this.mapView = c}
onPress={this.onMapPress}
>
{this.state.coordinates.map((coordinate, index) =>
<MapView.Marker key={`coordinate_${index}`} coordinate={coordinate} />
)}
{(this.state.coordinates.length >= 2) && (
<MapViewDirections
origin={this.state.coordinates[0]}
waypoints={ (this.state.coordinates.length > 2) ? this.state.coordinates.slice(1, -1): null}
destination={this.state.coordinates[this.state.coordinates.length-1]}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={3}
strokeColor=”hotpink”
optimizeWaypoints={true}
onStart={(params) => {
console.log(`Started routing between “${params.origin}” and “${params.destination}”`);
}}
onReady={result => {
console.log(‘Distance: ${result.distance} km’)
console.log(‘Duration: ${result.duration} min.’)

this.mapView.fitToCoordinates(result.coordinates, {
edgePadding: {
right: (width / 20),
bottom: (height / 20),
left: (width / 20),
top: (height / 20),
}
});
}}
onError={(errorMessage) => {
// console.log(‘GOT AN ERROR’);
}}
/>
)}
</MapView>
);
}
}

export default Example;

Email:

inteligenciafuturatv@gmail.com

Empresa
(Business)

Links

Últimas noticias(Latest News)

Saint Seiya animation 15 agosto, 2021 - futura

Copyright © 2021. Designed by  Inteligencia Futura