如何在React Native中根据英里设置谷歌地图的缩放级别？

Question

我有一个使用react-native-maps的React Native应用程序，其中有一个功能可以根据用户选择的半径显示附近的用户，使用geocode工作正常。但是我面临的问题是如何根据用户选择的半径设置地图的缩放级别？如果用户选择最大米数的半径，则地图应该显示整个世界吗？我该如何实现此目标？根据用户选择的半径动态设置缩放级别？

使用react-native-slider来设置半径，如何在滑动滑块时设置缩放级别？

- JPithwa

---

你解决了吗？ - Sultan Ali

Answer 1

      initialRegion:{
        latitude: parseFloat(28.999),
        longitude: parseFloat(28.999),
        latitudeDelta: 0.3822,
        longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height,
      }

- avantika bisht

---

感谢您提供答案。您能否编辑您的答案并包含代码解释？这将有助于未来的读者更好地理解正在发生的事情，特别是那些对该语言感到陌生并且难以理解概念的社区成员。 - Jeremy Caney

Answer 2

我在网上搜索了很多，最终选择了这个函数，它似乎非常有效，如果您知道要搜索的中心点的半径，它应该会生成一个初始边界框：

export const radiusToDelta = (radius: number, lat: number) => {
  // as described here: https://github.com/react-native-maps/react-native-maps/issues/505#issuecomment-354029449
  const oneDegreeOfLatitudeInMeters = 111.32 * 1000;
  const diameter = radius * 2;
  const delta =
    (diameter * 1609.34) /
    (oneDegreeOfLatitudeInMeters * Math.cos(lat * (Math.PI / 180)));

  return {
    latitudeDelta: delta,
    longitudeDelta: delta,
  };
};

- Phil Lucks

Answer 3

import { Dimensions} from 'react-native';
let {width, height} = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 1; //Increase or decrease the zoom level dynamically
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

<MapView
 region={{
  latitude: currentLocation.latitude,
  longitude: currentLocation.longitude,
  latitudeDelta: LATITUDE_DELTA,
  longitudeDelta: LONGITUDE_DELTA,
 }}>

- Ali Hayder

---

我不认为这是正确的答案！半径在哪里？ - Sultan Ali