美文网首页
React Native 地图定位geolocation,获取位

React Native 地图定位geolocation,获取位

作者: Jason_yuanxd | 来源:发表于2020-08-05 18:38 被阅读0次
 componentDidMount() {

    this.handleGetLocation();
 
 }
// 获取位置并逆地理转换
handleGetLocation=()=>{
 // 当前定位经纬度
 navigator.geolocation.getCurrentPosition(
   (position) => {
     const initialPosition = position
     console.log(initialPosition)
     const { longitude } = initialPosition.coords
     const { latitude } = initialPosition.coords
     console.log(`${longitude},${latitude}`)
     //通过调用高德地图逆地理接口,传入经纬度获取位置信息
     fetch(`http://restapi.amap.com/v3/geocode/regeo?key=2118fd7600536f90d28d&location=${longitude},${latitude}&radius=1000&extensions=all&batch=false&roadlevel=0`, {
       method: "POST",
       headers: {
         "Content-Type": "application/x-www-form-urlencoded"
       },
       body: ``
     })
       .then((response) => response.json())
       .then((jsonData) => {
         try {
           console.log(jsonData)
           this.setState({
             positionValue:jsonData.regeocode.formatted_address,
             positionValue2:jsonData.regeocode.addressComponent.province,

             positionValue3:jsonData.regeocode.addressComponent.district,
             positionValue4: jsonData.regeocode.addressComponent.cityNm,
             positionValue5: jsonData.regeocode.addressComponent.adcode,

           })
         }catch (e) {

         }
       })
       .catch((error) => {
         console.error(error);
       })
   },
   (error) => console.log(error),
   {  timeout: 20000, maximumAge: 1000 },
 )
}

 getstlCycleList() {
   this.setState({
     stlCycleList: stlCycleItem.map((item, index) => (
       <Text key={`dmp${index}`} code={item.id} style={{ fontSize: 13 }}>
         {item.name}
       </Text>
     ))
   });
 }

     <ListRow
            title="详细地址"
            style={{ height: 66 }}
            detail={
              <TextInput
                style={{ textAlign: "right", paddingHorizontal: 10, flex: 1 }}
                maxLength={20}
                // keyboardType="numeric"
                multiline={true}//多行输入
                editable={true}//是否可编辑
                placeholder="请输入详细地址"
                value={this.state.positionValue}
                // value={this.state.positionValue2}
                onChangeText={text => this.setState({ positionValue: text })}
              />
            }
          /> 

1596624138477.jpg

这里不能写错

相关文章

网友评论

      本文标题:React Native 地图定位geolocation,获取位

      本文链接:https://www.haomeiwen.com/subject/ctmorktx.html