标记反应本机地图无法拖动
marker react native map can't drag
我已经使用 react-native-map air bnb 在我的本地应用程序中渲染 google 地图。
地图和标记已显示,但标记无法拖动。
这是我的脚本
<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>
根据 react-native-maps
的 docs 可拖动:
This is a non-value based prop. Adding this allows the marker to be draggable (re-positioned).
而不是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>
这是我的项目的工作可拖动标记版本的片段。没什么特别的,只是使用 Exponent Components 导入 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>
为了确定,您是否尝试过按住标记拖动它?有点慢。
我已经使用 react-native-map air bnb 在我的本地应用程序中渲染 google 地图。 地图和标记已显示,但标记无法拖动。 这是我的脚本
<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>
根据 react-native-maps
的 docs 可拖动:
This is a non-value based prop. Adding this allows the marker to be draggable (re-positioned).
而不是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>
这是我的项目的工作可拖动标记版本的片段。没什么特别的,只是使用 Exponent Components 导入 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>
为了确定,您是否尝试过按住标记拖动它?有点慢。