且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

react-native映射框未显示用户位置和注释

更新时间:2022-12-30 11:03:22

遇到相同的问题,在Android> = 23上,您必须先请求权限

  import'react-native'的{PermissionsAndroid};...componentDidMount(){{PermissionsAndroid.requestMultiple([PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,权限Android.PERMISSIONS.ACCESS_COARSE_LOCATION],{标题:授予位置许可",消息:应用需要位置权限才能找到您的位置."}).then(granted => {console.log(已授予);解决();}).catch(err => {console.warn(err);拒绝(错误);});} 

I am currently learning react-native with maps using mapbox https://github.com/mapbox/react-native-mapbox-gl I followed everything that the map shows, if I give it a lon and lat it does show a location on my emulator but the problem is the annotation and show user location doesn't show at all.

Does anyone have any idea what I might be missing? I have been rebuilding the app a few times and checked debugging that there is no errors though

here is my simple code

export default class App extends Component {
    data = [
      { id: '' }
    ];

    render() {
      return (
        <View style={styles.container}>
          <Mapbox.MapView
            showUserLocation={true}
            styleURL={Mapbox.StyleURL.Street}
            zoomLevel={16}
            centerCoordinate={[-123.1118716, 49.2847564]}
            style={styles.container}>
          </Mapbox.MapView>
          <Mapbox.PointAnnotation
            id='1'
            title='nooooooooooooooooooooo'
            coordinate={[-123.1118716, 49.2847560]}
          >
          </Mapbox.PointAnnotation>
        </View>
      );
    }
  }

Ran into the same issue, on Android >=23 you have to ask for permissions first

import { PermissionsAndroid } from 'react-native';
...
componentDidMount() {
{
 PermissionsAndroid.requestMultiple(
            [PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
            PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],
            {
                title: 'Give Location Permission',
            message: 'App needs location permission to find your position.'
        }
    ).then(granted => {
        console.log(granted);
        resolve();
    }).catch(err => {
        console.warn(err);
        reject(err);
    });
}