打开地图屏幕时，如何将 MapView 置于用户当前位置的中心？ React Native 世博会

Question

打开地图屏幕时，如何使地图居中以显示用户的当前位置？按照 expo 文档，应该可以通过 Expo Location API 来实现？但是，文档不清楚。我从 expo Location 文档中提取了部分代码，并在我的地图屏幕中实现了它。那么，应该如何集成到MapView中，在打开地图画面时执行getCurrentPositionAsync方法，使地图居中呢？

import React, { useContext, useState, useEffect } from "react";
import MapView from "react-native-maps";
import styled from "styled-components";
import { Searchbar } from "react-native-paper";
import { View } from "react-native";

import * as Location from 'expo-location';

const Map = styled(MapView)`
height: 100%;
width: 100%;
`;

const SearchBarContainer= styled(View)`
padding: ${(props) => props.theme.space[3]};
position: absolute;
z-index: 999;
top: 20px;
width: 100%;
`;

export const MapScreen = ({navigation}) => {

  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    <> 
    <SearchBarContainer>
      <Searchbar placeholder="location"/>
    </SearchBarContainer>
    <Map showsUserLocation={true}>
      
    </Map>
    </>
  );};

Answer 1

您必须将世博会位置 api 提供的用户坐标传递到您的地图组件中，以便显示您当前的位置，您还需要使用 (lat,lng) 为您的位置设置一个初始状态，如下所示，如果您寻求更高的准确性，我会向您推荐这些选项 getCurrentPositionAsync

        export const MapScreen = ({navigation}) => {
        
          const [location, setLocation] = useState({
          latitude: 37.78825,
          longitude: -122.4324,
    });
          const [errorMsg, setErrorMsg] = useState(null);
          useEffect(() => {
            (async () => {
              let { status } = await Location.requestForegroundPermissionsAsync();
              if (status !== 'granted') {
                setErrorMsg('Permission to access location was denied');
                return;
              }
        
              let location = await Location.getCurrentPositionAsync({
                accuracy: Location.Accuracy.Balanced,
                enableHighAccuracy: true,
                timeInterval: 5
});
              setLocation(location);
            })();
          }, []);
        
          return (
            <> 
            <SearchBarContainer>
              <Searchbar placeholder="location"/>
            </SearchBarContainer>
            <Map region={location} showsUserLocation={true}/>
            </>
          );};

Answer 2

我也为这个问题苦苦挣扎了几天，我觉得很奇怪，即使 expo MapView 可以在地图上显示你自己的位置，它不能 return 你自己的坐标.

尽管如此，问题可以通过以下解决方案解决。

安装 Expo-location

expo install expo-location

导入它

import * as Location from 'expo-location'

创建状态

const [location, setLocation] = useState({});

创建一个异步检索您的坐标的 useEffect 函数（检索按钮按下的位置可能需要 5-10 秒，这对于用户体验来说太晚了）

useEffect(() => {
        (async () => {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                return;
            }

            let location = await Location.getCurrentPositionAsync({
                accuracy: Location.Accuracy.Balanced,
                enableHighAccuracy: true,
                timeInterval: 5
            });
            setLocation(location);
        })();
    }, []);

您的 Mapview 需要有一个引用才能与 MapView 对话并设置它的坐标。

<MapView ref={mapRef}>.... </MapView>

const mapRef = React.createRef();

最后创建一个可以由自定义按钮触发的功能，以用户位置为中心。

const goToMyLocation = async () => {
        mapRef.current.animateCamera({center: {"latitude":location.coords.latitude, "longitude": location.coords.longitude}});
}

打开地图屏幕时，如何将 MapView 置于用户当前位置的中心？ React Native 世博会

How to centre a MapView on a user's current location when the Map Screen is opened? React Native Expo

javascript

reactjs

react-native

expo

react-native-maps