在本地视图中单击地图视图上的任意位置时如何放置标记

Question

我的要求是，我需要在地图视图上显示标记。当用户单击地图视图上的任意位置时，还需要获取放置标记的坐标（纬度和经度）。

我在这里尝试的是：

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

Answer 1

首先，为地图标记取一个空数组。

constructor(props) {
  super(props)

  this.state = {
    region: {
      latitude: 24.92009056750823, 
      longitude: 67.1012272143364,
      latitudeDelta: 0.1,
      longitudeDelta: 0.1
    },
    markers: []
  }
}

然后创建一种在地图上添加新标记并返回其坐标的方法

addMarker(coordinates) {
  // Remove the following line after testing, its just to show coordinates as a warning in console.
  console.warn(coordinates);

  this.setState({
    markers: [...this.state.markers, 
      { latlng: coordinates }
    ]
  })
}

最后，在您的MapView中，渲染所有标记

<MapView style={styles.map} region={this.state.region}
onPress={(e) => this.addMarker(e.nativeEvent.coordinate)}>
{
    this.state.markers.map((marker, i) => (
        <MapView.Marker key={i} coordinate={marker.latlng} 
        title={`${marker.latlng.latitude}, ${marker.latlng.longitude}`} />
    ))
}
</MapView>

只要您在地图上的任意位置单击，就会在其中放置标记。单击标记将显示其坐标作为标题。

编辑
@FortuneCookie的评论：

要在地图上仅显示一个标记，并且当用户点击其他位置时，另一个标记将被删除，就像放下图钉一样。

它要简单得多。首先，将markers数组更改为单个标记。

constructor(props) {
  super(props)

  this.state = {
    region: {
      latitude: 24.92009056750823, 
      longitude: 67.1012272143364,
      latitudeDelta: 0.1,
      longitudeDelta: 0.1
    },
    // markers: []        Change this
    marker: null          // to this
  }
}

然后只需在render功能中为MapView更改此代码。

<MapView style={styles.map} region={this.state.region}
onPress={(e) => this.setState({ marker: e.nativeEvent.coordinate })}>
      {this.state.marker &&
      <MapView.Marker coordinate={this.state.marker} />}
</MapView>

您不必将多个标记放在数组中然后循环遍历。相反，您只需将所选位置放在单个标记中进行说明（如果存在标记），然后将其呈现在地图上即可。它将自动将所选位置设置为状态，并删除所有先前选择的位置。