MapBoxGL flyTo无法正常工作-无法识别

问题描述 投票:0回答:1

因此,我想制作一个RectButton,当按下它时,它将执行将相机发送到特定坐标的函数(onFlyToPress())。但是每次我使用flyTo函数时,都会向我返回一个异常,指出该函数无法识别/相机不是对象。

import React, { Component } from 'react';
import { StyleSheet, View, Image, Text } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
import { PermissionsAndroid } from 'react-native';
import tabbarConfigs from '../appColorElements.json'; // arquivo que controla toda a estrutura da tabbar
import { RectButton } from 'react-native-gesture-handler';

export default class Principal extends Component {
  state = {
    position: [50, 50],
    styleURL: 'mapbox://styles/qun4ntumt/ck390137d3lta1dnvs5u9428r',
  };

  onFlyToPress() {
    this.map.flyTo([-122.400021, 37.789085], 6000);
  }

  render() {
    return (
      <View style={styles.container}>
        <MapboxGL.MapView
          style={styles.map}
          styleURL={tabbarConfigs.colorElements.mapa.cor}
          rotateEnabled={false}
          animated={true}
          logoEnabled={false}
          compassEnabled={false}
          attributionEnabled={false}
          debugActivex>
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={this.state.position}
            maxZoomLevel={16}
          />
          <MapboxGL.UserLocation />
        </MapboxGL.MapView>
        <RectButton
          style={styles.btnCentralizer}
          onPress={() => {
            this.onFlyToPress();
          }}>
          <Localicon
            height={20}
            width={20}
            fill={tabbarConfigs.colorElements.paletaApp.cinza}
            style={{ alignSelf: 'center' }}
          />
        </RectButton>
      </View>
    );
  }
}

react-native mapbox mapbox-gl-js mapbox-gl
1个回答
0
投票

我有同样的问题。代替flyTo(),我通过使用setState({centerCoordinates})代替flyTo()直接更新了Camera的中心坐标。

<MapboxGL.Camera
    zoomLevel={15}
    animationMode={'flyTo'}
    animationDuration={3000}
    centerCoordinate={this.state.centerCoordinate}
/>

希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.