Question

我是本机反应的新手。我正在按照以下步骤创建MapView，并希望将自定义图像添加为叠加层。

https://www.npmjs.com/package/react-native-maps

Overlay组件参考中没有特定的示例，但我知道它应该像这样：

<MapView
    style={{ flex: 1 }}
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  >
    <Overlay 
      image="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
      bounds={[
          {latitude: 40.712216, longitude: -74.22655}, 
          {latitude: 40.773941, longitude: -74.12544}
      ]}
    />
</MapView>

但是此操作失败，并显示以下错误：

Warning: Failed prop type: Invalid prop `bounds[0]` of type `object` supplied to `MapOverlay`, expected `array`.

我不正确地越界吗？

Answer 1

您已添加错误边界数据。它应该是数组，需要按以下方式更新代码：

<Overlay 
   image="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
   bounds={[
     [40.712216, -74.22655], 
     [40.773941, -74.12544]
   ]}
/>

或

您需要在页面顶部声明两个常量，如下所示：

const COORDINATE1 = [35.67737855391474, 139.76531982421875];
const COORDINATE2 = [35.67514743608467, 139.76806640625];

，您的覆盖代码应如下所示：

<Overlay 
  image="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
  bounds={[COORDINATE1, COORDINATE2]}
/>

用react-native覆盖MapView上的坐标

1 个答案: