'React Native' select 使用本地地图定位

Question

我需要用户 select 活动地点。

现在可以打开本地地图（至少在 android 上）- 我可以通过 { Linking } from "react-native"; geo:24.669026,24.699024?z=6

打开本地地图

但是我找不到如何让本地地图提示用户设置一些位置并在某种确认之后？

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

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

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

Answer 1

您目前无法使用 react-native 执行此操作，您必须添加自己的地图。您可以使用 react-native-maps

Answer 2

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

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

1.获取用户经纬度。

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

ReactNative：https://aboutreact.com/react-native-geolocation/
博览会：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>;

'React Native' select 使用本地地图定位

'React Native' select location using native maps

javascript

react-native

deep-linking

react-native-maps