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

Question

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

问题出在我们在 google 地点选择器中搜索地址然后它会自动在所选位置设置 marker/pin 的部分，但标记集还不起作用。 ..

画面是： 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

我可以在 your code 中看到几个问题。首先，您收到此错误：

_this.notifyChange is not a function.

你需要在这里使用props：

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

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

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

您的地图现在以自动完成预测中选择的地点为中心。但是没有标记，因为你也应该相应地设置它的坐标：

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

我运行您的应用程序，经过上述更改后，您的标记将放置在选定的自动完成位置。请参见下面的屏幕截图。 :)

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

how to set a marker in the GooglePlacesAutocomplete in react native

google-maps

react-native

google-play-services

google-places-api

googleplacesautocomplete