如何在react-native中在Map视图上单击任何位置时放置标记

dnph8jn4 于 2023-04-07 发布在 React

关注(0)|答案(2)|浏览(175)

我的要求是，我需要显示在MaoView的标记，当用户点击Map上的任何地方，也需要得到坐标（纬度和经度）的位置，标记被放置。
这是我尝试的：

class Maps extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            region: {
                latitude: LATITUDE,
                longitude: LONGITUDE,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA
            },
            marker: {
                latlng: {
                    latitude: 17.6868,
                    longitude: 83.2185,
                    latitudeDelta: LATITUDE_DELTA,
                    longitudeDelta: LONGITUDE_DELTA
                }
            }
        };
    }
    
    onMapPress(e) {
        alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate));

        this.setState({
            marker: [
                {
                    coordinate: e.nativeEvent.coordinate
                }
            ]
        });
    }

    handleMarkerPress(event) {
        const markerID = event.nativeEvent.identifier;
        alert(markerID);
    }

    render() {
        return (
            <MapView
                identifier={"1"}
                ref={component => (this.map = component)}
                provider={this.props.provider}
                style={styles.map}
                region={this.state.region}
                onPress={this.onMapPress.bind(this)}
                //onPress={(event) => this.onMapPress(event)}
                provider={PROVIDER_DEFAULT}
                mapType="standard"
                zoomEnabled={true}
                pitchEnabled={true}
                showsUserLocation={true}
                followsUserLocation={true}
                showsCompass={true}
                showsBuildings={true}
                showsTraffic={true}
                showsIndoors={true}
            >
                <MapView.Marker coordinate={this.state.marker.latlng} />
            </MapView>
        );
    }
}

react-native

来源：https://stackoverflow.com/questions/43187453/how-to-place-marker-when-click-anywhere-on-the-map-view-in-react-native

2条答案

按热度按时间

ztmd8pv51#

首先，取一个空数组作为Map标记。

constructor(props) {
  super(props)

  this.state = {
    region: {
      latitude: LATITUDE, 
      longitude: LONGITUDE,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA
    },
    markers: []        // Here it is
  }
}

然后将点击位置的坐标作为一个新的标记推送到数组中。最后，在<MapView>中，渲染所有标记：

<MapView style={styles.map} region={this.state.region}
onPress={(e) => this.setState({ markers: [...this.state.markers, { latlng: e.nativeEvent.coordinate }] })}>
{
    // loop through markers array & render all markers
    this.state.markers.map((marker, i) => (
        <MapView.Marker coordinate={marker.latlng} key={i} />
    ))
}
</MapView>

每当你点击Map上的任何地方，位置的坐标将被添加到markers数组中，当state被更新时，render()函数将被再次调用，所有标记将被放置在Map上，包括新的标记。

编辑

@FortuneCookie的评论：
在Map上只显示一个标记，当用户点击其他地方时，其他标记会被删除，就像掉下一个别针一样。
简单多了，首先将markers数组的状态改为单个marker。

constructor(props) {
  super(props)

  this.state = {
    region: {
      latitude: LATITUDE, 
      longitude: LONGITUDE,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA
    },
    // markers: []        Change this
    marker: null          // to this
  }
}

对于<MapView>，只需更改其子事件& onPress。

<MapView style={styles.map} region={this.state.region}
onPress={(e) => this.setState({ marker: e.nativeEvent.coordinate })}>
{
      // if state contains marker variable with a valid value, render the marker
      this.state.marker &&
      <MapView.Marker coordinate={this.state.marker} />
}
</MapView>

你不必在数组中放置多个标记，然后循环遍历它。相反，你只需将所选位置的坐标作为单个标记放置到state，然后（如果标记存在）将其渲染到Map上。它会自动将所选位置设置为状态并删除任何先前选择的位置。

赞(0）回复(0）举报 2023-04-07

ru9i0ody2#

功能组件

const [marker, setMarker] = useState(null)
 <MapView
        //   ref={data}
        provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        style={styles.map}
        region={region}
        zoomEnabled={true}
        maxZoomLevel={zoom-3}
        minZoomLevel={2}
        scrollEnabled={true}
        showsScale={true}
        zoomControlEnabled={true}
        zoomTapEnabled={true}
        // mapType={'satellite'}
        rotateEnabled={false}
        showsUserLocation={true}
        userLocationUpdateInterval={5000}
        showsMyLocationButton={true}
        loadingEnabled={true}
        showsCompass={true}
        onPress={(e) => setMarker(e.nativeEvent.coordinate)}
      >
{marker!=null?
        <Marker
          draggable
          coordinate={marker}
          onPress={()=>Alert.alert("test")}

        />:null}
</MapView>

赞(0）回复(0）举报 2023-04-07

我来回答

如何在react-native中在Map视图上单击任何位置时放置标记

2条答案

功能组件

相关问题

热门标签

最新问答