Question

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

它们都可以正确显示在地图视图上，但不能同时显示在屏幕上（默认情况下为Image1渲染）

在两个标记都可以在屏幕上看到之前，我必须执行手动拖动操作。（在我手动拖动地图以使其在屏幕上可以看到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
  }
}

有人可以建议出什么问题吗？附加模拟器图像以供参考。

Answer 1

因此，根据我使用该库的经验-我发现最好的体验是在MapView组件上使用onMapReady道具。

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

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

OR

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

让我知道是否有帮助，我仍在学习，但是这种方法是假设您具有随时可用的标记，可以将它们传递到Map Component中进行渲染。

Answer 2

<MapView
            provider={MapView.PROVIDER_GOOGLE}
            ref={map => {this.map = map}}
            style={{ flex: 1 }}
            initialRegion={{latitude:this.state.request.latitude,
              longitude:this.state.request.longitude,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,}}
            onMapReady={() => {this.map.fitToSuppliedMarkers(['mk1','mk2'],{ edgePadding: 
              {top: 50,
                right: 50,
                bottom: 50,
                left: 50}

            })}}
            >
            <Marker
            image={require('../../../assets/pin.png')}
            coordinate={{latitude:this.state.request.latitude,longitude:this.state.request.longitude}} 
            title='Punto de partida'
            identifier={'mk1'}
            >

            </Marker>

            <Marker
            image={require('../../../assets/pin_final.png')}
            coordinate={{latitude:this.state.request.latitude_destinity,longitude:this.state.request.longitude_destinity}} 
            title='Punto de destino'
            identifier={'mk2'}
            >

Answer 3

在我看来，最好的方法是在iOS中使用fitToElements和在Android中使用fitToSuppliedMarkers（或fitToCoordinates）。我得到的代码最终如下所示：

import React, { useRef, useCallback } from 'react';
import { Platform } from 'react-native';
import MapView, { PROVIDER_GOOGLE, LatLng, Marker } from 'react-native-maps';

type Props = {
  origin: LatLng;
  destination: LatLng;
}

export default function ({ origin, destination }: Props) {
    const ref = useRef<MapView>(null);

    // effects
    const onMapReadyHandler = useCallback(() => {
      if (Platform.OS === 'ios') {
        ref?.current?.fitToElements(false);
      } else {
        ref?.current?.fitToCoordinates([origin, destination], {
          animated: true,
          edgePadding: {
            top: 150,
            right: 50,
            bottom: 50,
            left: 50,
          },
        });
      }
    }, [ref]);

    // UI
    return (
      <MapView
        style={{ width: '100%', height: '100%' }}
        ref={ref}
        provider={PROVIDER_GOOGLE}
        onMapReady={onMapReadyHandler}
      >
        <Marker coordinate={origin} identifier="origin" />
        <Marker coordinate={destination} identifier="destination" />
      </MapView>
    );
  }
);

Answer 4

可以查看缩放级别吗？ mapview具有zoom属性，可以为此提供帮助。您还可以使用animateToCamera

react-native-maps fitToSuppliedMarker / fitToCorodinates不会显示所有标记

4 个答案: