Question

我一直在寻找一个简单的反应本地交互式地图，以便用户能够使用设备的GPS传感器找到用户的位置，并手动固定他/她的当前位置。

以下是我已经找到的内容：

react-native-maps-google

react-native-open-maps

integrate-airbnb-google-maps-in-a-react-native-app

react-native-maps

不幸的是，它们只是使用预定义的位置渲染地图。

请考虑最佳解决方案是兼容Android和iOS平台的解决方案。

提前致谢。

Answer 1

在React native maps

之后使用installation instructions

您可以执行以下操作：添加导入并设置初始坐标

imports....
import MapView from "react-native-maps";
//maybe in the componentWillMount
componentWillMount() {
    this.setState({
      initialLocation: {
        latitude: xxxxxxxxxx,
        longitude: xxxxxxxxxx,
        latitudeDelta: xxxxxxxxxx,
        longitudeDelta:xxxxxxxxxx
      },
      locationChosen: false
    });
}

渲染mapView

render() {
    return (
      <View>
        <MapView
          initialRegion={this.state.initialLocation}
          ref={ref => this.map = ref}
        />
        <View>
          <Button 
             title="Locate Me" 
             onPress={this.currentLocationHandler} 
          />
        </View>
      </View>
    );
  }
}

现在您的处理程序使用 React Native’s Geolocation：（不要忘记向您的Android清单添加访问您所在位置的权限）

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

使用getCurrentPosition

currentLocationHandler = () => {
    navigator.geolocation.getCurrentPosition(pos => {
      const coordsEvent = {
        nativeEvent: {
          coordinate: {
            latitude: pos.coords.latitude,
            longitude: pos.coords.longitude
          }
        }
      };
      const coords = coordsEvent.nativeEvent.coordinate;
        this.map.animateToRegion({
          ...this.state.initialLocation,
          latitude: coords.latitude,
          longitude: coords.longitude
        });
   })
 }

通过这个，您将能够在地图上找到自己，然后您可以添加一个标记，这将很容易遵循存储库中的示例。

希望它有所帮助！

Answer 2

要使用用户的当前位置创建地图，请使用react-native-maps和React Native’s Geolocation。

您可以在此处找到位置和地图标记示例：MyLocationMapMarker。也可以查看other examples。

反应本机交互式地图组件

2 个答案: