如何在GooglePlacesAutocomplete中设置本机响应标记

Question

我需要帮助来解决这个问题。

问题在于我们在google位置选择器中搜索地址，然后它在选定的位置自动设置一个标记/引脚，但是标记集还不能工作。

屏幕是:下面的Diurno.js是整个代码。

以下是搜索代码：

      <GooglePlacesAutocomplete
    placeholder="Outro Local?"
    placeholderTextColor="#333"
    returnKeyType={'search'} // Can be left out for default return key 
    //onPress={onLocationSelected}
    onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                this.props.notifyChange(details.geometry.location);
            }
            }
    query={{
      key: "",
      language: "pt"
    }}
        nearbyPlacesAPI='GooglePlacesSearch'
        debounce={300}
    textInputProps={{
      onFocus: () => {
        this.setState({ searchFocused: true });
      },
      onBlur: () => {
        this.setState({ searchFocused: false });
      },
      autoCapitalize: "none",
      autoCorrect: false
    }}
    listViewDisplayed={searchFocused}
    fetchDetails ={true}
    enablePoweredByContainer={false}

这里的其他代码：

        <MapView 
      //onPress={this.handleMapPress}
      onPress={this.handleMapPress}  
      style={StyleSheet.absoluteFill}
      ref={map => this.mapView = map}
      rotateEnabled={true}
      scrollEnabled={true}
      showsMyLocationButton={true}
      showsUserLocation={true}
      zoomEnabled={true}
      showsPointsOfInterest={true}
      showBuildings={false} 
      //initialRegion={initialRegion}
      //region={region}
      initialRegion={region}
      provider="google"> 
      {!!props &&
       (<MapView.Marker
                coordinate={props.region}
               >         
        </MapView.Marker>
        )} 

      {!!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> 

Answer 1

我可以在你的代码中看到几个问题。首先，您将得到以下错误：

_this.notifyChange不是一个函数。

您需要在这里使用props：

onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
    this.props.notifyChange(details.geometry.location);
  }
}

然后，请注意，您已经从您的region中注释掉了MapView属性，并且也没有onRegionChange。如果你加上这些：

region={this.props.region}
onRegionChange={(region) => this.props.onRegionChange(region)}

您的地图现在从自动完成预测中心到选定的地方。但是没有标记，因为您还应该相应地设置它的坐标：

<MapView.Marker coordinate={this.props.region} />

我运行了您的应用程序，在上面的更改之后，您的标记将被放置在选定的自动完成位置。见下面的截图。:)

​

​