【问题标题】:marker react native map can't drag标记反应原生地图无法拖动
【发布时间】:2017-05-04 09:11:24
【问题描述】:

我已经使用 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>

【问题讨论】:

    标签: javascript react-native-android react-native-maps react-native


    【解决方案1】:

    根据react-native-maps中的docs 可拖动

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

    您应该像这样定义它,而不是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>
    

    这是我项目的工作可拖动标记版本的 sn-p。没什么花哨的,只是使用指数组件来导入 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>
    

    为了确定,您是否尝试过按住标记来拖动它?有点慢。

    【讨论】:

    • 什么是 onUserPinDragEnd.bind??
    • @BraianMellor 拖动结束时要调用的自定义函数。查看文档
    • 文档不完整。这就是我问你的原因。我在博客中找到了解决方案
    • 如何在标记停止的位置获取当前的纬度和经度?
    • 可以将其定义为draggable={this.state.draggable},或draggable={true} / draggable={false},以便有条件地使标记可拖动。
    猜你喜欢
    • 2019-05-19
    • 2019-02-28
    • 2020-04-11
    • 1970-01-01
    • 2018-12-09
    • 2019-11-17
    • 2023-03-29
    • 2020-10-28
    • 1970-01-01
    相关资源
    最近更新 更多