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});
}

在native-react-maps中创建一个新Marker

1 个答案: