रीड-नेटिव

Question

में स्वचालित स्थान का पता लगाने वाले मानचित्र बनाने के लिए कैसे मैंने https://github.com/lelandrichardson/react-native-maps मानचित्र का संदर्भ दिया है, लेकिन मैं जीपीएस का उपयोग कर स्वचालित स्थान का पता लगाने के लिए प्रतिक्रिया-मूल में नक्शे बना चुका हूं। यहां कोड है जो स्थिर अक्षांश और देशांतर के साथ मानचित्र प्रस्तुत करता है। यहां मेरा अपडेट किया गया कोड है। लेकिन यह अभी भी सही स्थान

getInitialState() { 
    return { 
     initialPosition: 'unknown', 
     lastPosition: 'unknown', 
    }; 
    }, 

    componentDidMount() { 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     var initialPosition = JSON.stringify(position); 
     this.setState({initialPosition}); 
     }, 
     {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
    ); 
    this.watchID = navigator.geolocation.watchPosition((position) => { 
     var lastPosition = JSON.stringify(position); 
     this.setState({lastPosition}); 
    }); 
    }, 

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

    render() { 
    return (
     <View style={styles.container}> 
     <MapView 
      ref="map" 
      mapType="terrain" 
      style={styles.map} 
      initialPosition={this.state.initialPosition} 
      lastPosition={this.state.lastPosition} 
     > 
     </MapView> 
     </View> 

क्या आप इसे सही कर सकते हैं?

अग्रिम धन्यवाद

Answer 1

आप ऐसा कर सकते हैं का उपयोग कर प्रतिक्रिया देशी जियोलोकेशन:
https://facebook.github.io/react-native/docs/geolocation.html

वहां पहले से ही एक अच्छा उदाहरण आप ऐसा कर सकते हैं कि कैसे पर है:

componentDidMount: function() { 
    navigator.geolocation.getCurrentPosition(
    (position) => { 
     var initialPosition = JSON.stringify(position); 
     this.setState({initialPosition}); 
    }, 
    (error) => alert(error.message), 
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
); 
    this.watchID = navigator.geolocation.watchPosition((position) => { 
    var lastPosition = JSON.stringify(position); 
    this.setState({lastPosition}); 
    }); 
} 

आप अब प्रारंभिक स्थिति (अक्षांश और देशांतर) है, अपने हार्ड कोडित मूल्य के बजाय इसका उपयोग करें। जब भी स्थान बदलता है तो घड़ीपोत सफलता कॉलबैक का आह्वान करता है।

मैं वर्तमान में अपने ऐप में स्थानीय रेस्तरां खोजने के लिए इसका उपयोग कर रहा हूं।

---

अपडेट किया गया उत्तर:

मैं इस चलाने के लिए Genymotion एमुलेटर उपयोग कर रहा हूँ। यदि आप इस कोड को जेनमोशन पर भी चलाने जा रहे हैं, तो कृपया सुनिश्चित करें कि आपने Google Play समर्थन इंस्टॉल किया है, अन्यथा प्रतिक्रिया-मूल-मानचित्र काम नहीं करेंगे। यदि आप भौतिक उपकरण का उपयोग कर रहे हैं तो आपको यह कदम नहीं करना है।

https://github.com/codepath/android_guides/wiki/Genymotion-2.0-Emulators-with-Google-Play-support

जियोलोकेशन के बारे में, सुनिश्चित करें कि आप AndroidManifest.xml में ACCESS_FINE_LOCATION अनुमति जोड़ लिया है कि सुनिश्चित करें:

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

नहीं तो आप एक त्रुटि प्राप्त होगी: "ऐसा लगता एप्लिकेशन की तरह 'नहीं करता है टी को स्थान तक पहुंचने की अनुमति नहीं है। "

कृपया यह भी सुनिश्चित करें कि आपका जीपीएस/वाईफ़ाई/डेटा सक्षम है, अन्यथा आपका डिवाइस आपके वर्तमान स्थान को पुनर्प्राप्त नहीं कर सकता है।

var React = require('react'); 
var ReactNative = require('react-native'); 
var { 
    StyleSheet, 
    PropTypes, 
    View, 
    Text, 
    Dimensions, 
    TouchableOpacity, 
} = ReactNative; 

var MapView = require('react-native-maps'); 

var { width, height } = Dimensions.get('window'); 
const ASPECT_RATIO = width/height; 

// (Initial Static Location) Mumbai 
const LATITUDE = 19.0760; 
const LONGITUDE = 72.8777; 

const LATITUDE_DELTA = 0.01; 
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 

var CustomMap = React.createClass({ 
    getInitialState() { 
    return { 
     region: { 
     latitude: LATITUDE, 
     longitude: LONGITUDE, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA 
     }, 
    }; 
    }, 

    componentDidMount: function() { 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     this.setState({ 
      region: { 
      latitude: position.coords.latitude, 
      longitude: position.coords.longitude, 
      latitudeDelta: LATITUDE_DELTA, 
      longitudeDelta: LONGITUDE_DELTA 
      } 
     }); 
     }, 
     (error) => alert(error.message), 
     {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
    ); 

    this.watchID = navigator.geolocation.watchPosition((position) => { 
     const newRegion = { 
     latitude: position.coords.latitude, 
     longitude: position.coords.longitude, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA 
     } 

     this.onRegionChange(newRegion); 
    }); 
    }, 

    componentWillUnmount: function() { 
    navigator.geolocation.clearWatch(this.watchID); 
    }, 

    onRegionChange(region) { 
    this.setState({ region }); 
    }, 

    render() { 
    return (
     <View style={styles.container}> 
     <MapView 
      ref="map" 
      mapType="terrain" 
      style={styles.map} 
      region={this.state.region} 
      onRegionChange={this.onRegionChange} 
     > 
     </MapView> 
     <View style={styles.bubble}> 
      <Text style={{ textAlign: 'center'}}> 
      {`${this.state.region.latitude.toPrecision(7)}, ${this.state.region.longitude.toPrecision(7)}`} 
      </Text> 
     </View> 
     </View> 
    ); 
    }, 
}); 

var styles = StyleSheet.create({ 
    container: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    justifyContent: 'flex-end', 
    alignItems: 'center', 
    }, 
    map: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    }, 
    bubble: { 
    backgroundColor: 'rgba(255,255,255,0.7)', 
    paddingHorizontal: 18, 
    paddingVertical: 12, 
    borderRadius: 20, 
    }, 
}); 

module.exports = CustomMap; 

ऊपर कोड चल रहा है, आप पाएँगे कि आपका मूल स्थिर स्थान (मुंबई) जब getCurrentPosition कहा जाता है componentDidMount के माध्यम से डिवाइस से अपने वर्तमान स्थान के साथ ओवरराइट है।

आप, स्थिति में परिवर्तन ट्रैक onRegionChange के साथ संयोजन में watchPosition का उपयोग करें, अन्यथा अगर आप सिर्फ प्रारंभिक स्थिति watchPosition हटाने कदम प्राप्त करने की आवश्यकता की जरूरत है।