ответные нативные карты fitToSuppliedMarker / fitToCorodinates не показывает все маркеры - PullRequest
Новая
       120

ответные нативные карты fitToSuppliedMarker / fitToCorodinates не показывает все маркеры

0 голосов
/ 17 октября 2018

Я пытаюсь использовать простой MapView и отображать 2 маркера.

они оба отображаются правильно на виде карты, но не видны на экране в одно и то же время (изображение 1 отображается по умолчанию)

Мне нужно выполнить операцию перетаскивания вручную, прежде чем оба маркера будут видны на экране. (Image2 после того, как я вручную перетащил карту, чтобы их можно было увидеть на экране)

я попытался использовать 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({ error: error.message }),
        { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
      );
}

onRegionChange(region) {
    this.setState({ position:region })
}

componentDidMount(){
    //this.mapRef.fitToSuppliedMarkers(markerIDs,true);
    const favPlaceLatitude = parseFloat(this.props.navigation.state.params.latitude)
    const favPlaceLongitude = parseFloat(this.props.navigation.state.params.longitude)
    this.mapRef.fitToCoordinates([{latitude:favPlaceLatitude,longitude:favPlaceLongitude}], {
        edgePadding: {
          bottom: 200, right: 50, top: 150, left: 50,
        },
        animated: true,
    });
}

render(){

    const { navigation } = this.props;
    const favPlaceLatitude = parseFloat(navigation.state.params.latitude)
    const favPlaceLongitude = parseFloat(navigation.state.params.longitude)

    return(
        <View style={styles.container}>
            <MapView provider={MapView.PROVIDER_GOOGLE} ref={ref => {this.mapRef = ref;}} style={styles.map} region={this.state.position}>
                {this.state.position.latitude &&
                    <MapView.Marker identifier="Marker2" coordinate={{latitude:this.state.position.latitude,longitude:this.state.position.longitude}} pinColor="red"/>
                }
                {this.state.position.longitude &&
                    <MapView.Marker identifier="Marker1" coordinate={{latitude:favPlaceLatitude,longitude:favPlaceLongitude}} pinColor="green"/>
                }
            </MapView>
        </View>
    );
  }
}

const styles={
  container:{
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map:{
    padding:100,
    ...StyleSheet.absoluteFillObject
  }
}

Вы можете подсказать, что не так?прикрепление изображения симулятора для справки.enter image description here enter image description here

Ответы [ 2 ]

0 голосов
/ 12 августа 2019

Можете ли вы проверить уровень масштабирования?В mapview есть свойство zoom, которое может помочь в этом.Вы также можете использовать animateToCamera

0 голосов
/ 24 июня 2019

Итак, из моего опыта работы с этой библиотекой - я обнаружил, что лучше всего использовать onMapReady опору для компонента MapView.

https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#events

<MapView
  ...
  onMapReady{() => {
    this.mapRef.fitToCoordinates(...)
  }}
/>

ИЛИ 

<MapView
  ...
  onMapReady{() => {
    this.mapRef.fitToSuppliedMarkers(...)
  }}
/>

Дайте мне знать, если это помогло или нет, я все еще изучаю это, но этот подход предполагает, что у вас есть готовые маркеры, которые вы передаете в компонент карты для рендеринга.

...