Question

我有一个我正在使用react-native-maps的React Native应用程序。我一直在显示具有当前位置的地图，但我想显示放大/缩小按钮，就像Google地图中的默认按钮一样。有没有办法在react-native-maps中做到这一点，否则我将不得不做一个？

这是我的代码：

const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = 0.0421;
const LATITUDE = 3.202424;
const LONGITUDE = 101.717247;
let { width, height } = Dimensions.get('window')
const timeout = 1000;
let animationTimeout;
export default class Map extends Component {

  constructor(props) {
    super(props);
    this.state = {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      routeCoordinates: [],
      distanceTravelled: 0,
      prevLatLng: {},
      coordinate: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: 0,
        longitudeDelta: 0
      }),
      isModalVisible: false,
      vendors: [],
      vendorId:''
    }
  }
  async componentWillMount () {
    await this.locationData();
  }
  componentDidMount() {
    const { coordinate } = this.state;

    this.watchID = navigator.geolocation.watchPosition(
      position => {
        const { routeCoordinates } = this.state;
        const { latitude, longitude } = position.coords;

        const newCoordinate = {
          latitude,
          longitude
        };

        if (Platform.OS === "android") {
          if (this.marker) {
            this.marker._component.animateMarkerToCoordinate(
              newCoordinate,
              500
            );
          }
        } else {
          coordinate.timing(newCoordinate).start();
        }

        this.setState({
          latitude,
          longitude,
          routeCoordinates: routeCoordinates.concat([newCoordinate]),
          prevLatLng: newCoordinate
        });
      },
      error => console.log(error),
      {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000,
        distanceFilter: 10
      }
    );
  }
  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
  }
  getMapRegion = () => ({
    latitude: this.state.latitude,
    longitude: this.state.longitude,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA
  });

  locationData = async () => {
    let bodyData = {};
    try {
      let userInfo = await AsyncStorage.getItem('userInfo');
      let latLng = await AsyncStorage.getItem('markerPosition');
      if (userInfo !== null && latLng !== null) {
        userInfo = JSON.parse(userInfo);
        latLng = JSON.parse(latLng);
        bodyData.customer_id = userInfo.customerId;
        bodyData.security_code = userInfo.userSecurityCode;
        bodyData.lat = 3.202424;
        bodyData.lng = 101.717247;
      }
    } catch (error) {
      console.log(error)
    }
    await axios({
      method: 'post',
      url: 'api',
      data: bodyData,
      config: { headers: { 'Content-Type': 'application/json' } }
    })
      .then(function (response) {
        console.log('check',response)
        if ('success' in response.data) {
          if ('data' in response.data) {
            let vendors = response.data.data;
            let vendorData = vendors.map(vendor => {
              return {
                id: vendor.vendor_id,
                title: vendor.company_name,
                lat: vendor.lat,
                lng: vendor.lng
              }
            });
            this.setState({
              vendors: vendorData,
            })
          } else {
            alert(response.data.success)
          }
        } else {
          alert(response.data.error)
        }
      }.bind(this))
      .catch(function (error) {
        //handle error
        console.log(error)
      })
  }
  showMarkers = (vendors) => {
    return vendors.map((vendor, index) => {
      console.log('show',vendor)
      return (
        <MapView.Marker
          key={vendor.id}
          coordinate={{
            latitude: parseFloat(vendor.lat),
            longitude: parseFloat(vendor.lng)
          }}
          title={vendor.title}
          description={(this.state.categories)}
          pinColor='blue'
          onPress={() => this.focus(vendor)}
          onCalloutPress={() => this._toggleModal()}
        />
      )
    })
  }
  render() {
    const { vendors } = this.state
    return (
      <Container style={{ position: 'absolute' }}>
        <Content>
          <View>
          <MapView
            ref={ref => { this.map = ref }}
            style={styles.mapContainer}
            provider={PROVIDER_GOOGLE}
            showUserLocation
            followUserLocation
            loadingEnabled
            minZoomLevel={2}  // default => 0
            maxZoomLevel={15} // default => 20
            zoom={1}
            showsUserLocation={true}
            followUserLocation={true}
            showsMyLocationButton={true}
            zoomEnabled={true}
            enableZoomControl={true}
            zoomTapEnabled={true}
            region={this.getMapRegion()}
          >
            <Marker.Animated
              ref={marker => {
                this.marker = marker;
              }}
              coordinate={this.state.coordinate}
            />
          
          
           {this.showMarkers(vendors)}
          
            </MapView>
              </View>
        </Content>
      </Container>

    )
  }
}

现在我想一定是animated region的东西。但是我可以在哪里在代码中添加这个动画区域。

Answer 1

使用react-native-maps中的animateToRegion方法

制作一个对象，向区域添加通行证以设置缩放级别

latitude和longitude指定地图的中心位置，latitudeDelta和longitudeDelta指定地图的查看区域

region: {
                latitude: 11.2,
                longitude: 22.1,
                latitudeDelta: 0.005,
                longitudeDelta: 0.001
            }

Answer 2

import { Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
const [widthOfMap, setWidthOfMap] = useState(width);

<MapView  
 onMapReady={() => { setWidthOfMap(widthOfMap- 1) }}
>
</>

如何在React Native Map中显示放大/缩小按钮

2 个答案: