маркер реагирует на родную карту, которую нельзя перетаскивать

Я использую air bnb react-native-map для отображения карты 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 javascript react-native-android react-native-maps
person cahyowhy    schedule 04.05.2017    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Согласно документам react-native-maps draggable :

Это реквизит, не основанный на ценности. Добавление этого позволяет маркеру быть перетаскиваемым (перемещаемым).

Вместо 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>

И просто, чтобы быть уверенным, вы пробовали удерживать маркер, чтобы перетащить его? Это довольно медленно.

person eden    schedule 04.05.2017
comment
что на UserPinDragEnd.bind?? - person Braian Mellor; 07.11.2018
comment
@BraianMellor — пользовательская функция, которая вызывается, когда перетаскивание заканчивается. См. документацию - person eden; 07.11.2018
comment
Документация не полная. вот почему я спрашиваю вас. Я нашел решение в блоге - person Braian Mellor; 07.11.2018
comment
как я могу получить текущую широту и долготу в том месте, где остановился маркер? - person Ahmed Imam; 04.12.2018
comment
Совершенно нормально определить его как draggable={this.state.draggable} или draggable={true} / draggable={false}, чтобы условно иметь перетаскиваемый маркер. - person Motin; 14.06.2019
comment
что делать при перетаскивании маркера? onUserPinDragEnd можете ли вы сказать мне, что содержит ? - person Oliver D; 28.10.2019
comment
при использовании свойства draggable он перетаскивает маркер, но карта не анимируется с ним. Любая помощь в этом? - person amit pandya; 15.01.2020