当我 select 地图中的标记时，如何设置放大？

Question

如何只为在地图上选择的标记设置缩放比例，而不为聚焦位置设置缩放比例？这是我的代码：我尝试了很多代码，但我还没有成功。

export default class Mapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedLocation: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta:
          (Dimensions.get('window').width / Dimensions.get('window').height) *
         0.00522,
      },
      locations: locations,
    };
    this.switchMapType = this.switchMapType.bind(this);
  }

  onPressZoomIn() {
    this.region = {
      latitude: this.state.focusedLocation.latitude,
      longitude: this.state.focusedLocation.longitude,
      latitudeDelta: this.state.focusedLocation.latitudeDelta * 0.5,
      longitudeDelta: this.state.focusedLocation.longitudeDelta * 0.5,
    };

    this.setState({
      focusedLocation: {
        latitudeDelta: this.region.latitudeDelta,
        longitudeDelta: this.region.longitudeDelta,
        latitude: this.region.latitude,
        longitude: this.region.longitude,
      },
    });
    this.map.animateToRegion(this.region, 500);
  }

  onPressZoomOut() {
    this.region = {
      latitude: this.state.focusedLocation.latitude,
      longitude: this.state.focusedLocation.longitude,
      latitudeDelta: this.state.focusedLocation.latitudeDelta / 0.5,
      longitudeDelta: this.state.focusedLocation.longitudeDelta / 0.5,
    };
    this.setState({
      focusedLocation: {
        latitudeDelta: this.region.latitudeDelta,
        longitudeDelta: this.region.longitudeDelta,
        latitude: this.region.latitude,
        longitude: this.region.longitude,
      },
    });
    this.map.animateToRegion(this.region, 500); 
  }
  render() {
    return (
      <View style={styles.container}>
       <StatusBar hidden />
        <MapView
          //initialRegion={initialRegion}
          style={styles.mapView}
          rotateEnabled={true}
          scrollEnabled={true}
          showsMyLocationButton={false}
          showsUserLocation={true}
          zoomEnabled={true}
          mapType={this.state.mapType}
          showsPointsOfInterest={false}
          showBuildings={false}
          onMapReady={this._mapReady}
          ref={ref => (this.map = ref)}>
          {locations.map(
            (locations, id, latitude, longitude, hora, linha, prestadora) => (
              console.log(locations.latitude, locations.latitude),
              (
                <MapView.Marker
                  onPress={this.pickLocationHandler}
                  ref={mark => (locations.mark = mark)}
                  key={id}
                  title={locations.linha + ' - ' + locations.prestadora}
                  pinColor={'tomato'}
                  description={
                    'Aguarde o seu transporte a partir de: ' + locations.hora
                  }
                  coordinate={{
                    latitude: JSON.parse(locations.latitude),
                    longitude: JSON.parse(locations.longitude),
                  }}
                />
              )
            )
          )}
        </MapView>
        ...
        <ScrollView
          style={styles.placesContainer}
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onMomentumScrollEnd={e => {
            const locations =
              e.nativeEvent.contentOffset.x > 0
                ? e.nativeEvent.contentOffset.x / Dimensions.get('window').width
                : 0;

            const { latitude, longitude, mark } = this.state.locations[
              locations
            ];

            this.map.animateToCoordinate(
              {
                latitude: JSON.parse(latitude),
                longitude: JSON.parse(longitude),
              },
              500
            );

            setTimeout(() => {
              mark.showCallout();
            }, 500);
          }}>
          {locations.map(locations => (
            <View key={locations.id} style={styles.place}>
              <Text style={styles.title}>Ponto {locations.id} </Text>
              <Text style={styles.text}>A partir de: {locations.hora}</Text>
              <Image
                source={require('./assets/expo.symbol.white.png')}
                style={{
                  marginLeft: Dimensions.get('window').width / 1.5,
                  width: 67,
                  height: 67,
                  tintColor: '#FF3D00',
                }}
              />
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}

我该如何解决？例如，当我按下放大按钮时，它会放大所选的特定标记？

以下是您的视图的完整代码：https://snack.expo.io/@matheus_cbrl/zoomin-zoomout

这里是通过处理程序标记选择位置的代码：

pickLocationHandler = event => {
    const coords = event.nativeEvent.coordinate;
    console.log('Location picker Marker', coords);
    this.map.animateToRegion({
      ...this.state.focusedlocation,
      latitude: coords.latitude,
      longitude: coords.longitude,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta:
          (Dimensions.get('window').width / Dimensions.get('window').height) *
          0.00522,
    });

    this.setState(prevState => {
      return {
        focusedlocation: {
          ...prevState.focusedlocation,
          latitude: coords.latitude,
          longitude: coords.longitude,
        },
        locationChosen: true,
      };
    });
  };

Answer 1

首先移动到您的标记，然后放大。

移动到标记，

this.refs.map.animateToRegion({
     latitude: markerLat,
     longitude: markerLong,
})

然后放大 focusedLocation.

Answer 2

我找到了解决方案：

第一个：

  _mapReady = () => {
    this.state.locations[0].mark.showCallout();
    this.animate(); <---ADD THIS METHOD
  };

第二个 创建此函数，动画到您感兴趣的第一个点...

  animate(){
    let r = {
        latitude: JSON.parse(this.state.locations[0].latitude),
        longitude: JSON.parse(this.state.locations[0].longitude),
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta:
        (Dimensions.get('window').width / Dimensions.get('window').height) *
        0.00522,
    }; 
    this.map.animateToRegion(r, 500);
}

此代码会放大您感兴趣的第一个标记。请查看！！

当我 select 地图中的标记时，如何设置放大？

How to set a zoom in when I select the marker in the map?

maps

google-maps

reactjs

react-native