如何在react native中适合特定标记的缩放并可以在地图中选择其他任何标记? [英] How to fit a zoom in the specific marker in react native and can select any other marker in the map?

问题描述

在这种情况下，初始化应用程序时，Pin-marker设置在当前位置，但是在同一张地图中，我还有其他标记，当我尝试选择其他标记时，它又适合当前位置，如何解决这个问题?我需要选择任何标记...，然后...当我找到某个地方(带有Google地方)时，它设置了一个新标记，并设置了一个新位置，并将该相机缩放到当前搜索标记，并放大了所选标记，而我的另一个问题是创建一个通过按钮获取当前位置(设备用户)的函数……有人可以帮助我?

In this case when the app is initialize, the Pin-marker is set in the current position, but in the same map I have others markers, when I try to select other markers it fits again in the current position, how to solve this issue? I need to select any marker... and... When I find some place(with google places) it set a new marker and it set a new position and set the camera to the current search marker with zoom in this selected marker, and my other problem was make a function to get the current location(device user) by a button... someone can help me???

<View style={styles.container}>
    <StatusBar hidden />
    <MapView
      onPress={this.handleMapPress}
      style={StyleSheet.absoluteFill}
      ref={map => (this.mapView = map)}
      rotateEnabled={true}
      scrollEnabled={true}
      showsMyLocationButton={true}
      followsUserLocation={true}
      showsUserLocation={true}
      zoomEnabled={true}
      showsPointsOfInterest={true}
      showBuildings={false}
      //region={this.props.region}
      initialRegion={region}
      provider="google">
      {!!location && (
        <MapView.Marker
          coordinate={location}
          onPress={this.handleMarkerPress}>
          <Image
            source={isAddressVisible ? placholder2 : placholder}
            style={styles.icon}
          />
        </MapView.Marker>
      )}
      {this.state.coordinates.map(
        (coordinates, index, title, description, location) => (
          <MapView.Marker
            onPress={this.handleMapPress}
            ref={mark => (coordinates.mark = mark)}
            key={`coordinate_${index}`}
            title={coordinates.title}
            description={coordinates.description}
            coordinate={{
              latitude: coordinates.latitude,
              longitude: coordinates.longitude,
            }}>
            <Image
              source={isAddressVisible ? placholder2 : placholder}
              style={styles.icon}
            />
          </MapView.Marker>
        )
      )}
      <MapView.Marker coordinate={this.props.region} >
          <Image
            source={ markerImage}
            style={styles.icon}
          />
      </MapView.Marker>
    </MapView>

这是调用当前位置的按钮:

here is the button to call the current location:

        <TouchableOpacity
       onPress={this.getlocation}
      style={styles.fab2}>
            <Image
              source={require('../assets/gps.png')}
              style={{
                width: 35,
                height: 35,
                margin: 10,
                tintColor: 'white',
              }}
            />
    </TouchableOpacity>

推荐答案

我已经解决了这个问题，这是您阅读的点心...

I got a solution to this problem, here is the snack to your read...

下面是简单的代码:

  pickLocationHandler = event => {
const coords = event.nativeEvent.coordinate;

this.map.animateToRegion({
  ...this.state.focusedlocation,
  latitude: coords.latitude,
  longitude: coords.longitude,
});

this.setState(prevState => {
  return {
    focusedlocation: {
      ...prevState.focusedlocation,

      latitude: coords.latitude,

      longitude: coords.longitude,
    },

    locationChosen: true,
  };
});
};

getLocationHandler = () => {
navigator.geolocation.getCurrentPosition(
  pos => {
    const coordsEvent = {
      nativeEvent: {
        coordinate: {
          latitude: pos.coords.latitude,

          longitude: pos.coords.longitude,
        },
      },
    };

    this.pickLocationHandler(coordsEvent);
  },

  err => {
    console.log(err);

    alert(
      'Ocorreu um erro ao carregar sua localização, por favor ligue o GPS!'
    );
  }
 );
};

然后在创建的按钮上调用此函数:

and I call this function at my created button:

        <TouchableOpacity
     onPress={this.getLocationHandler}
      style={styles.fab2}>
            <Image
              source={require('../assets/gps.png')}
              style={{
                width: 35,
                height: 35,
                margin: 10,
                tintColor: '#FF3D00',
              }}
            />
    </TouchableOpacity>

以下是完整代码的链接:

Here is the link to the full code:

https: //snack.expo.io/@matheus_cbrl/react-native-maps-autocomplete---address---current-location-button

如果这回答了您可能的问题，请喜欢它！ :)

Please if this answered your possible problem, like it!! :)

这篇关于如何在react native中适合特定标记的缩放并可以在地图中选择其他任何标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！