打开地图屏幕时,如何将 MapView 以用户当前位置为中心?反应原生博览会

Posted

技术标签:

【中文标题】打开地图屏幕时,如何将 MapView 以用户当前位置为中心?反应原生博览会【英文标题】:How to centre a MapView on a user's current location when the Map Screen is opened? React Native Expo 【发布时间】:2022-01-02 07:36:05 【问题描述】:

如何在地图屏幕打开时使地图居中以显示用户的当前位置?按照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>
    </>
  );;

【问题讨论】:

【参考方案1】:

您必须将 Expo location 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/>
            </>
          );;

【讨论】:

您好,感谢您的回答。我实现了你的代码。但是,我收到警告:道具类型失败:道具 region.latitudeDelta 在 mapView 中被标记为必需,但其值未定义。而且地图还没有以当前位置为中心?【参考方案2】:

这几天我也一直在努力解决这个问题,我觉得很奇怪,即使 expo MapView 可以在地图上显示您自己的位置,它也无法返回您自己的坐标。

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

    安装 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 以用户当前位置为中心?反应原生博览会的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Android 的 MapView 中更新当前位置的蓝点标记

MapView 以用户坐标为中心缩放

当我缩放 mapView 以显示我的注释时,选定的注释部分不在屏幕上

添加手势识别器以允许在 Swift 中的 MapView 上水平滑动

Android Auto - 如何显式打开谷歌地图进行导航以显示在汽车屏幕上(intent.setPackage 不起作用)

如何使用 MapView 制作 2 个分开的屏幕?