标签: react-native-maps

以最简单的方式，我将如何对地图区域进行动画处理，以便我刚刚单击的标记位于屏幕的中心，并且在其他情况下位于屏幕上半部分的中心（在第一季度和第二季度）？

我已经使用 react-native-map air bnb 在我的本机应用程序中渲染谷歌地图。地图和标记显示出来，但标记不能拖动。这是我的脚本

<View style={Style.mapContainer}>
            <GeoLocation onSetInitalPos={this.onSetInitialPosition}
                         onSetLastPos={this.onSetLastPosition}/>
            <MapView style={Style.map} region={this.state.region} onRegionChange={this.onRegionChange}>
                <MapView.Marker draggable={this.state.draggable}
                                coordinate={this.state.marker.latlng}
                                title={this.state.marker.title}
                                description={this.state.marker.description}
                                onDrag={() => console.log('onDrag')}
                />
            </MapView>
            <AutoCompleteMap onSetNewPlace={this.setMarkerPosition}/>
        </View>

我已将反应本机地图与最新的反应本机应用程序集成。在地图中，我想设置地图的边界。官方文档建议了该方法 setMapBoundaries ，但需要这样的论证northEast: LatLng, southWest: LatLng 。

我怎样才能获得这些参数的值。我的mapView是这样的。

<MapView
            showsUserLocation
            provider={MapView.PROVIDER_GOOGLE}
            style={styles.map}
            region={region}
            onRegionChangeComplete={this.onRegionChangeComplete}
            setMapBoundaries={}
            onUserLocationChange={this.onUserLocationChange}

        > 

即使我明确设置showsPointsOfInterest,showsIndoors和showsBuildingsto false- 尝试字符串"false"和布尔值false- 我MapView在 React Native 中会呈现各种附加信息。我希望地图整洁并适合用户。这是我的MapsContainer：

import React, { Component } from "react";
import MapView, { Marker } from "react-native-maps";
import { View } from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import MapsMarker from "../MapsMarker/MapsMarker";
import styles from "./styles";

export class MapsContainer extends Component {
  static propTypes = {
    addresses: PropTypes.object,
    coordinates: PropTypes.object,
    locations: PropTypes.array
  };

  render() {
    const …

我正在尝试使用简单的 MapView 并显示 2 个标记。

它们都在地图视图上正确显示，但在屏幕上不可见（默认渲染 Image1）

在屏幕上可以看到两个标记之前，我必须执行手动拖动操作。（我手动拖动地图后的图像2，以便它们可以在屏幕上看到）

我尝试使用 fitToSuppliedMarkers/fitToCocordinates 但似乎没有任何效果。

export default class FavItemMapView extends Component{

constructor(props){
    super(props)
    this.state={
        position:{
            latitude:1.286353,
            longitude:103.853067,
            latitudeDelta: 0,
            longitudeDelta: 0,
        },
        error:null
    }
    this.mapRef = null;
}

componentWillMount(){

    const favPlaceLatitude = parseFloat(this.props.navigation.state.params.latitude)
    const favPlaceLongitude = parseFloat(this.props.navigation.state.params.longitude)
    markers.push({latitude:favPlaceLatitude,longitude:favPlaceLongitude});
    navigator.geolocation.getCurrentPosition(
        (position) => {
          console.log("wokeeey" + width + height);
          console.log(position);
          var lat = parseFloat(position.coords.latitude)
          var long = parseFloat(position.coords.longitude)

          var initialRegion = {
            latitude: lat,
            longitude: long,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }

          this.onRegionChange(initialRegion)
        },
        (error) => this.setState({ …

我正在使用react-native-maps并且使用此代码得到纬度和经度：

callLocation(that) {
  navigator.geolocation.getCurrentPosition(
    position => {
      const currentLongitude = JSON.stringify(position.coords.longitude);
      const currentLatitude = JSON.stringify(position.coords.latitude);
      that.setState({ currentLongitude: currentLongitude });
      that.setState({ currentLatitude: currentLatitude });
    },
    error => alert(error.message),
    { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
  );
  that.watchID = navigator.geolocation.watchPosition(position => {
    console.log(position);
    const currentLongitude = JSON.stringify(position.coords.longitude);
    const currentLatitude = JSON.stringify(position.coords.latitude);
    that.setState({ currentLongitude: currentLongitude });
    that.setState({ currentLatitude: currentLatitude });
  });
}

这是我的地图视图代码：

<MapView
  style={styles.map}
  initialRegion={{
    latitude: this.state.currentLatitude,
    longitude: this.state.currentLongitude,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  }}
/>

当我将这个纬度和经度粘贴到我的代码中时，出现以下错误：

我在我的应用程序中使用了 React Native mpaboxgl 。

import MapboxGL from "@mapbox/react-native-mapbox-gl";


<MapboxGL.MapView
  logoEnabled={false}
  attributionEnabled={false}
  ref={(e) => { this.oMap = e }}
  zoomLevel={6}
  centerCoordinate={[54.0, 24.0]}> 
<MapboxGL.MapView> 

如何在另一个组件中使用oMap？所以我可以做一些事情，比如从其他组件/页面上打开/关闭图层。

我正在尝试计算用户放大或缩小时的缩放级别，
我发现反应本机地图有一个 onRegionChange ，它具有经度、纬度、经度增量和纬度增量（我猜）可用于计算缩放
级别回复我尝试过这种方式：

 Math.round(Math.log(360 / this.state.longitudeDelta) / Math.LN2);

但它返回一个大数字（这不是缩放级别）。

有很多关于如何在类组件中使用react-native-maps的示例，但我还没有找到那些带有无状态组件的示例。我使用无状态组件来访问全局状态。在获得用户的位置后，我需要将 MapView 的相机视图从初始区域移动，在互联网上搜索后，我不知怎的最终得到了这段不起作用的代码。

import React, { useState, useEffect, useRef } from 'react'
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
...

const Explore = props => {
    const [userCoords, setUserCoords] = useState({
        latitude: 0,
        longitude: 0
    })

    const mapRef = useRef(null);

    onMapReady = () => {
        getUserLocation()
    }

    getUserLocation = async () => {
        Geolocation.getCurrentPosition(
            async (position) => {
                setUserCoords(position.coords)
                mapRef.animateToRegion({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                })
            },
            async (error) => {
                // See error …