“React Native”使用本地地图选择位置

Question

我需要用户选择事件的位置。

现在已经有效的是打开本机地图（至少在 Android 上） - 我可以通过 { Linking } from "react-native"; geo:24.669026,24.699024?z 打开本机地图=6

但是我找不到如何让原生地图提示用户设置某个位置并经过某种确认？

我想象了类似 return_url 的东西，带有某种指向我的应用程序的反向链接。

或者这只能通过嵌入地图和使用 Google Maps API 来实现？

（我试图避免计费，因为我想做的就是帮助用户找到坐标并将它们放回应用程序，除了发送用户将它们显示在本机地图上之外，应用程序不使用坐标执行任何操作）

Answer 1

因此，如果我理解正确，您希望在地图上显示用户的当前位置，而不向任何第三方付费，如果是这种情况，您需要执行以下操作。

1. 获取用户的纬度和经度。
2. 使用一些标记在地图上显示这些纬度和经度。

1.获取用户经纬度。

您可以按照下面的文章获取用户经纬度。

• ReactNative： https://aboutreact.com/react-native-geolocation/
• 博览会：< a href="https://docs.expo.dev/versions/latest/sdk/location" rel="nofollow noreferrer">https://docs.expo.dev/versions/latest/sdk/location

2.使用一些标记在地图上显示这些纬度和经度。

因此，在这一步中，我们将使用 react-native-maps 和 OpenStreetMap。

注意：请勿更改 UrlTile 中的 urlTemplate

这是来自 react-native-maps 的自定义地图图块的参考>

https://github.com/react-native-maps/react-native-maps#tile-overlay-using-tile-server

import MapView, { UrlTile, Marker } from "react-native-maps";

const { width, height } = props;
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 8; //Very high zoom level
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const userCoords={{
   latitude: number,
   longitude: number
}};
<MapView
  initialRegion={{
    latitude: 51.1657,
    longitude: 10.4515,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  }}
  loadingEnabled
  minZoomLevel={3}
  maxZoomLevel={10}
  showsIndoors={false}
  showsTraffic={false}
  showsBuildings={false}
  showsScale={true}
>
  <UrlTile
    /**
     * The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
     * For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
     */
    urlTemplate={"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"}
    /**
     * The maximum zoom level for this tile overlay. Corresponds to the maximumZ setting in
     * MKTileOverlay. iOS only.
     */
    maximumZ={10}
    /**
     * flipY allows tiles with inverted y coordinates (origin at bottom left of map)
     * to be used. Its default value is false.
     */
    flipY={false}
  />
  <Marker coordinate={userCoords}>
    /**
     * Your custom marker here 
    */
  </Marker>
</MapView>;

Answer 2

目前您无法使用 react-native 做到这一点，您必须添加自己的地图。您可以使用 react-native-maps