标记反应原生地图无法拖动

cah*_*why 2 javascript react-native react-native-android react-native-maps

我已经使用 react-native-map air bnb 在我的本机应用程序中渲染谷歌地图。地图和标记显示出来,但标记不能拖动。这是我的脚本

<View style={Style.mapContainer}>
            <GeoLocation onSetInitalPos={this.onSetInitialPosition}
                         onSetLastPos={this.onSetLastPosition}/>
            <MapView style={Style.map} region={this.state.region} onRegionChange={this.onRegionChange}>
                <MapView.Marker draggable={this.state.draggable}
                                coordinate={this.state.marker.latlng}
                                title={this.state.marker.title}
                                description={this.state.marker.description}
                                onDrag={() => console.log('onDrag')}
                />
            </MapView>
            <AutoCompleteMap onSetNewPlace={this.setMarkerPosition}/>
        </View>
Run Code Online (Sandbox Code Playgroud)

ede*_*den 9

根据文档react-native-maps 可拖动

这是一个非基于价值的道具。添加它允许标记可拖动(重新定位)。

相反draggable={this.state.draggable},您应该像这样定义它

<MapView style={Style.map} region={this.state.region} onRegionChange={this.onRegionChange}>
  <MapView.Marker
    draggable
    coordinate={this.state.marker.latlng}
    title={this.state.marker.title}
    description={this.state.marker.description}
    onDragEnd={this.onUserPinDragEnd.bind(this)} />
</MapView>
Run Code Online (Sandbox Code Playgroud)

这是我的项目的工作可拖动标记版本的片段。没什么特别的,只是使用指数组件导入 MapView,而不是 npm 安装和链接。

   <Components.MapView
      ref={(map) => this.map = map}
      style={{width: Metrics.screenWidth, height: mapHeight, zIndex: 0}}
      region={{
        latitude: this.state.location.coords.latitude,
        longitude: this.state.location.coords.longitude,
        latitudeDelta: 0.0100,
        longitudeDelta: 0.0100,
      }}
    >
      <Components.MapView.Marker
        key={'i29'}
        draggable
        onDragEnd={this.onUserPinDragEnd.bind(this)}
        title={'You are here'}
        coordinate={{
          latitude: this.state.userLocation.coords.latitude,
          longitude: this.state.userLocation.coords.longitude,
        }}
      />
   </Components.MapView>
Run Code Online (Sandbox Code Playgroud)

并且可以肯定的是,您是否尝试按住标记拖动它?速度有点慢