从 Expo.MapView React-native 将 fitToSuppiedMarkers 应用到我的地图的正确方法是啥？

Posted 2023-02-23

【中文标题】从 Expo.MapView React-native 将 fitToSuppiedMarkers 应用到我的地图的正确方法是啥？

【英文标题】：What is the correct way to apply fitToSuppliedMarkers to my map from Expo.MapView React-native?从 Expo.MapView React-native 将 fitToSuppiedMarkers 应用到我的地图的正确方法是什么？

【发布时间】：2018-05-31 17:55:54

【问题描述】：

我正在使用 Expo 的 MapView 模块，我相信它的工作方式与 react-native-maps 相同。 目前，我尝试使用 MapView 的 ref 道具来获取地图对象。我不确定为什么地图对象未定义。我是否以正确的方式使用 fitToSuppiedMarkers 方法？为什么地图对象未定义？ 这是错误的屏幕截图：

这是地图的代码：

import React,  Component  from 'react';
import  View, TouchableOpacity  from 'react-native';
import PropTypes from 'prop-types';
import  connect  from 'react-redux';
import R from 'ramda';
import Icon from 'react-native-vector-icons/MaterialIcons';
import  MapView  from 'expo';
import MapMarkerInfoModal from './MapMarkerInfoModal';

const navigationOptions = 
  drawerLabel: 'Map',
  drawerIcon: ( tintColor ) =>
    <Icon name="map" size=24 color=tintColor />,
;

const propTypes = 
  university: PropTypes.shape( lat: PropTypes.number, lng: 
PropTypes.number ),
  studentCourses: PropTypes.object,
;

const enhancer = connect(state => (
  university: state.user.university,
  studentCourses: state.studentCourses.items,
));

const markerImg = require('../images/library_marker.png');

class Map extends Component 
  constructor(props) 
    super(props);

    this.meetings = [];
    this.state =  showInfo: false, selectedLocation: null ;
  

  componentWillReceiveProps(nextProps) 
    console.log(this.map);
    this.meetings = R.pipe(
      R.values,
      R.pluck('meetings'),
      R.flatten,
      R.groupBy(m => (m ? `$m.lat $m.lng` : '')),
      R.toPairs
    )(nextProps.studentCourses);

    setTimeout(
      () => this.map.fitToSuppliedMarkers(R.map(R.nth(0), 
this.meetings), 
true),
      1000
    );
  

  showInfoModal = event => 
    const id = event.nativeEvent.id;
    const meetings = R.filter(item => item[0] === id, this.meetings)[0] [1];
    this.setState( showInfo: true, selectedLocation: meetings );
  ;

  hideInfoModal = () => 
    this.setState( showInfo: false );
  ;

  render() 
    return (
      this.props.university.lat !== null && <View style= flex: 1 >
        <MapView
          ref=ref => 
            this.map = ref;
          
          initialRegion=
            latitude: this.props.university.lat,
            longitude: this.props.university.lng,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          
          provider="google"
          showsMyLocationButton=true
          showsCompass=true
          zoomEnabled=true
          loadingEnabled=true
          style= flex: 1 
        >
          this.meetings.map(([coord, mtg]) => 
            if (coord === '') return null;

            const [lat, lng] = coord.split(' ');
            return (
              <MapView.Marker
                key=coord
            i    dentifier=coord
                coordinate=
                  latitude: Number(lat),
                  longitude: Number(lng),
                
                image=markerImg
                onPress=this.showInfoModal
              />
            );
          )
        </MapView>
        <MapMarkerInfoModal
          visible=this.state.showInfo
          location=this.state.selectedLocation
          onClose=this.hideInfoModal
        />
        <TouchableOpacity
          onPress=() => this.props.navigation.navigate('DrawerOpen')
          style= position: 'absolute', top: 30, left: 20 
        >
          <Icon
            name="menu"
            size=25
          />
        </TouchableOpacity>
      </View>
    );
  


Map.propTypes = propTypes;
Map.navigationOptions = navigationOptions;

export default enhancer(Map);

【问题讨论】：

在提供代码时获得帮助的最佳方式是提供一个 mvce：***.com/help/mcve。您还需要确保提供其他相关信息，例如您正在使用的库的版本

这是从 react-native-maps 存储库中获取的示例，它似乎可以按预期工作：snack.expo.io/HyqyxTpyQ

我刚刚做了和布伦特一样的事情哈哈snack.expo.io/HyhAeIAkQ

【参考方案1】：

只需添加root

() => this.map.root.fitToSuppliedMarkers(R.map(R.nth(0))