在 native-react-maps 中创建新标记答案

【问题标题】：Creating a New Marker in native-react-maps在 native-react-maps 中创建新标记
【发布时间】：2016-12-13 05:15:27
【问题描述】：

我们如何通过单击可拖动标记在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>
}

【问题讨论】：

标签： javascript google-maps reactjs react-native react-native-maps

【解决方案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});
}

【讨论】：