react-native-maps 中的当前位置

Posted 2023-02-23

【中文标题】react-native-maps 中的当前位置

【英文标题】：Current Location in react-native-maps

【发布时间】：2020-09-18 06:08:44

【问题描述】：

我正在尝试使用react-native-maps 获取当前位置。这是我的以下代码：

import MapView from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';

const [position, setPosition] = useState(
    latitude: 10,
    longitude: 10,
    latitudeDelta: 0.001,
    longitudeDelta: 0.001,
);

useEffect(() => 
    Geolocation.getCurrentPosition(success, error, options);
, []);

var options = 
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  ;
      
function success(pos) 

 var crd = pos.coords;

 setPosition(
   latitude: crd.latitude,
   longitude: crd.longitude,
   latitudeDelta: 0.0421,
   longitudeDelta: 0.0421,
 );


function error(err) 
   console.warn(`ERROR($err.code): $err.message`);


return (

<MapView
    style=styles.map
    initialRegion=position
    showsUserLocation=true
>
</MapView>

现在，如果我删除属性 initialRegion，地图就可以正常工作了。但是使用上面的代码，我得到一个没有任何错误的白屏。

任何帮助将不胜感激。

【参考方案1】：

我认为您的代码的问题在于 getCurrentPosition 失败，并且由于您在 position 内的初始坐标非常放大，看起来它没有显示任何内容。

还要确保已启用 google maps API 和 react-native-maps is configured correctly。

这是我的工作方式：

import React, useState, useEffect from 'react';
import StyleSheet from 'react-native';
import MapView from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';

const App = () => 
  const [position, setPosition] = useState(
    latitude: 10,
    longitude: 10,
    latitudeDelta: 0.001,
    longitudeDelta: 0.001,
  );

  useEffect(() => 
    Geolocation.getCurrentPosition((pos) => 
      const crd = pos.coords;
      setPosition(
        latitude: crd.latitude,
        longitude: crd.longitude,
        latitudeDelta: 0.0421,
        longitudeDelta: 0.0421,
      );
    ).catch((err) => 
      console.log(err);
    );
  , []);

  return (
    <MapView
      style=styles.map
      initialRegion=position
      showsUserLocation=true
    />
  );
;

const styles = StyleSheet.create(
  map: 
    ...StyleSheet.absoluteFillObject,
  ,
);

export default App;

【讨论】：

实际上，如果我将initialRegion 更改为region 就可以正常工作，当我构建应用程序并在手机中安装应用程序时，它与上面的屏幕截图相同。

我不太明白你的意思。你说把initialRegion改成region就可以了，但是在手机上运行还是和图片一样，所以改不行？

或者您是说将initialRegion 更改为region 可以完全解决您的问题？