Как разместить маркер при нажатии в любом месте на карте в режиме реагирования

Мое требование: мне нужно показать маркер на карте. Когда пользователь щелкает в любом месте на карте, ему также необходимо получить координаты (широта и долгота), где находится маркер.

Вот что я пробовал:

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 react-native-android react-native-maps
person Lavaraju    schedule 03.04.2017    source источник
comment
какие-либо обновления по этому поводу?   -  person Nisarg Thakkar    schedule 29.03.2018

Ответы (1)


arrow_upward
13
arrow_downward

Прежде всего, возьмите пустой массив для маркеров карты.

constructor(props) {
  super(props)

  this.state = {
    region: {
      latitude: 24.92009056750823, 
      longitude: 67.1012272143364,
      latitudeDelta: 0.1,
      longitudeDelta: 0.1
    },
    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 }] })}>
{
    this.state.markers.map((marker, i) => (
        <MapView.Marker key={i} coordinate={marker.latlng} />
    ))
}
</MapView>

Всякий раз, когда вы щелкаете в любом месте на карте, маркер будет помещен туда. Щелкнув по маркеру, вы увидите его координаты в качестве заголовка.

EDIT
Комментарий @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 просто измените этот код (событие onPress и дочерние элементы) <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>

Вам не нужно помещать несколько маркеров в массив, а затем перебирать его. Скорее, вы просто указываете выбранное местоположение в одном маркере и (если маркер существует) просто отображаете его на карте. Он автоматически установит выбранное местоположение в состояние и удалит все ранее выбранные.

person TalESid    schedule 01.01.2019
comment
Но это создает несколько маркеров на карте. Можно ли показать только один маркер на карте, и когда пользователь нажимает в другом месте, другой маркер удаляется, как если бы он бросал булавку?? - person FortuneCookie; 30.07.2019
comment
Отредактировал мой ответ. Надеюсь, это поможет! - person TalESid; 30.07.2019
comment
@TalhaSiddiqi благодарю Господа за вашу помощь, я пытался найти рабочее решение для аналогичной проблемы, и ничего не помогло, кроме вашего. Хорошего дня! - person leveeee; 29.04.2020