javascript - 在 native-react-maps 中创建新标记

Question

react-native-maps我们如何通过单击可拖动标记在地图上创建新标记？这个新标记将在单击发生时初始可拖动标记所在的位置创建。

我可以从 中获取新标记的位置坐标e.nativeEvent.coordinate，但我们如何创建这个新标记？

createMarker(e) {       
    console.log(e.nativeEvent.coordinate)  # here's the lng/lat for new marker
}

render() {
    <MapView
        ref='map'
        initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
        }}
    >

        <MapView.Marker 
            coordinate={{latitude: LATITUDE, longitude: LONGITUDE}}
            onPress={(e) => this.setPickupLocation(e)}
            draggable
        ></MapView.Marker>

    </MapView>
}

Answer 1

您可以通过渲染一组标记然后使用包含新项目的新标记数组 setState 来做到这一点。

在下面的情况下，我在附近设置了一个新的，稍微高一点，这样就可以看到了。

render() {

    return (
        <View>
            <Text>MySupaFancyMap</Text>
            <MapView
                style={styles.map}
                region={this.state.region}
                onRegionChangeComplete={this._onRegionChangeComplete.bind(this)}
            >
                {this.state.markers.map( (marker, index) => (
                    <MapView.Marker key={index}
                        coordinate={marker.latlng}
                        title={marker.title}
                        onPress={this._createMarker.bind(this, marker)}
                    />

                ))}
            </MapView>
        </View>
    );
}
_createMarker (markerInfo) {
    newMarker = {
        latlng: {
            latitude: markerInfo.latlng.latitude+0.01,
            longitude: markerInfo.latlng.longitude+0.01
        }
    }

    markers = this.state.markers.concat([newMarker]);
    this.setState({markers});
}