MapboxGL React Native UserLocation Indicator 不显示在地图上

问题描述

来自 的 UserIndicator，在 IOS 上可以正常工作和显示，但是对于 android，这取决于，它有时工作，有时不工作，我也意识到，当我的 CameraRef.current.setCamera() 未定义时UserIndicator 不显示。

我尝试尽可能地请求位置权限，如下所示：

反应原生：

    PermissionsAndroid.requestMultiple(
  [PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],{
    title: 'Give Location Permission',message: 'App needs location permission to find your position.'
  }
).then((res) => console.log(res))

MapBoxGL：

if (Platform.OS == "android") {
    var temp = await MapBoxGL.requestAndroidLocationPermissions()
}

展会：

let { status } = await Location.requestPermissionsAsync();

所有这些请求权限都可以正常工作，并且输出“已授予”或已授予：true

这是我的地图组件：

var Map = ({ navigation }) => {
  const MapRef = React.useRef(null)
  const CameraRef = React.useRef(null)
  const LocationRef = React.useRef(null)
  const { user,setUser } = React.useContext(UserContext)
  const [data,setDATA] = React.useState([null])
  const [reload,setReload] = React.useState(false)
  const {location,setLocation} = React.useContext(LocationContext)
  console.log(location)
  var test = null;
  React.useEffect(() => {
    MapBoxGL.setTelemetryEnabled(false);
    MapBoxGL.locationManager.start();
    return () => {
      MapBoxGL.locationManager.stop();
    }
    // console.log(LocationRef.current)
  },[])
  function handleClick() {
    CameraRef.current.setCamera({
      centerCoordinate: [location.coords.longitude,location.coords.latitude],zoomLevel: 11,animationDuration: 200,})
  }
  function CenterCamera() {
    if (CameraRef.current) {
      CameraRef.current.setCamera({
        centerCoordinate: [location.coords.longitude,animationDuration: 2000,})
    }
  }
  function goTo(latitude,longitude) {
    CameraRef.current.setCamera({
      centerCoordinate: [longitude,latitude],zoomLevel: 13,animationDuration: 100,})
  }
  function displayPings(data) {
    if (data.data.length > 0) {
      if (data.data[0].type_id == null) {
        data.data[0].type_id = 1;
      }
      const val = searchInjson(data.data[0].type_id)
      const features = setFeatures(val,data.data[0])
      return (
        <View key={data.data[0].id_activity_data}>
          <MapBoxGL.Images
            images={{
              FootBall: json[0].url,}}
          />
          <MapBoxGL.ShapeSource hitBox={{ width: 20,height: 20 }} onPress={() => goTo(data.data[0].latitude,data.data[0].longitude)} id={(data.data[0].id_activity_data).toString()} shape={features}>
            <MapBoxGL.SymbolLayer id={(data.data[0].id_activity_data).toString()} style={{ iconImage: ['get','icon'] }} />
          </MapBoxGL.ShapeSource>
        </View>
      );
    }
  }
  if (location && location.city != null && data.data) {
    return (
      <View style={styles.page}>
        <MapBoxGL.MapView onPress={() => console.log("test")} ref={(ref) => {
        }
        } style={styles.map} compassEnabled={false} zoomEnabled={true} >
          <MapBoxGL.UserLocation />
          <MapBoxGL.Camera ref={(ref) => {
            CameraRef.current = ref
            CenterCamera()
          }} />
          {data.data.map((data) => displayPings(data))}
        </MapBoxGL.MapView>
        <ComponentsOnmap></ComponentsOnmap>
        <TouchableOpacity style={styles.rondLocation} onPress={handleClick}>
          <FontAwesome5 name="location-arrow" size={24} color="#434040" />
        </TouchableOpacity>
        <BottomSheet city={location.city} data = {data} setReload = {setReload} navigation={navigation}></BottomSheet>
      </View>)
  }
  else
    return (
      <View style={styles.page}>
        <MapBoxGL.MapView ref={MapRef} compassEnabled={false}  style={styles.map} zoomEnabled={true} >
          <MapBoxGL.UserLocation ref={LocationRef} />
        </MapBoxGL.MapView>
        <ComponentsOnmap></ComponentsOnmap>
        <BottomSheet city="No location" navigation={navigation}></BottomSheet>
      </View>
    )
}

export default Map 

我的条件 location && location.city != null 工作正常，我试过没有它，但问题还是一样

我的位置上下文：

import React,{ Component,createContext,useState,useContext } from "react";
import { Platform,PermissionsAndroid } from "react-native"
import * as Location from 'expo-location';
import MapBoxGL from "@react-native-mapBox-gl/maps";
import { GetLocation } from "../API/GetLocation"
export const LocationContext = createContext();

MapBoxGL.setAccesstoken("Je l'ai caché bande de petit malin");

export default LocationProvider = ({ children }) => {
  const [location,setLocation] = useState({ coords: [],city: null,permission: false })
  const [city,SetCity] = React.useState(null)
  const [coords,setCoords] = React.useState([])
  React.useEffect(() => {
    PermissionsAndroid.requestMultiple(
      [PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],{
        title: 'Give Location Permission',message: 'App needs location permission to find your position.'
      }
    ).then((res) => console.log(res))
    GetLocation.then((res) => {
      setLocation(res)
    })
  },[])

  return (
    <LocationContext.Provider value={{ location,setLocation,city,SetCity,coords,setCoords }}>
      {children}
    </LocationContext.Provider>
  )
}

我的 GetLocation 承诺

import { useContext } from "react"
import { Platform } from "react-native"
import * as Location from 'expo-location';
import MapBoxGL from "@react-native-mapBox-gl/maps";

export const GetLocation = new Promise(async (resolve,reject) => {
    if (Platform.OS == "android") {
        var temp = await MapBoxGL.requestAndroidLocationPermissions()
    }
    let { status } = await Location.requestPermissionsAsync();
    if (status == "granted")
        Location.getCurrentPositionAsync().then((location) => {
            console.log(location)
            console.log("ca marche ap")
            let longitude = location.coords.longitude
            let latitude = location.coords.latitude
            return ({ latitude,longitude })
        }).then(async (coords) => Location.reverseGeocodeAsync(coords).then(async (adress) => {
            resolve({ coords: coords,city: adress[0].city,granted: true })
        })).catch((error) => console.log(reject(error)));
})

     

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）