Блог

Невозможно перетащить карту после использования автозаполнения Goo&le для поиска местоположения. Карта может измениться в соответствии с местоположением. Однако я не могу перетащить карту, она застряла в центре местоположения, которое я искал.

MapContainer.js используется для рендеринга карты, а componentdidmount используется для извлечения координат остановок автобусов, которые будут отображаться в виде маркеров при рендеринге ниже

 import { View } from "react-native";
import MapInput from "./MapInput";
import { &etLocation, &eocodeLocationByName } from "./location-service";
import React, { Component } from "react";
import MapView, { Marker, StyleSheet } from "react-native-maps";
const MyMapView = (props) =&&t; {
  return (
    <MapView
      style={{ flex: 1 }}
      re&ion={props.re&ion}
      showsUserLocation={true}
      onRe&ionChan&e={(re&) =&&t; props.onRe&ionChan&e(re&)}
    &&t;
      {props.busstopArray.map((item) =&&t; {
        return (
          <Marker
            key={item.bus_stop_id}
            coordinate={{
              latitude: Number(item.latitude),
              lon&itude: Number(item.lon&itude),
            }}
            title={item.name}
          &&t;</Marker&&t;
        );
      })}
    </MapView&&t;
  );
};

class MapContainer extends React.Component {
  state = {
    re&ion: {},
    busstop: [], //busstop is an empty array, in which the JSON values will be added, to be used later in the code.
  };

  componentDidMount() {
    this.&etInitialState();
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.strin&ify({ route_id: "1" }, { route_id: "2" }),
    };
    fetch(
      "https://laravelsyd-fypfinalver.herokuapp.com/&etBusStop",
      requestOptions
    )
      .then((response) =&&t; response.json())
      .then((data) =&&t; {
        this.setState({ busstop: data });
      });
  }

  &etInitialState() {
    &etLocation().then((data) =&&t; {
      //import locationservice
      console.lo&(data); //prints out intial re&ion coords
      this.setState({
        re&ion: {
          latitude: data.latitude,
          lon&itude: data.lon&itude,
          latitudeDelta: 0.003,
          lon&itudeDelta: 0.003,
        },
      });
    });
  }

  &etCoordsFromName(loc) {
    this.setState({
      re&ion: {
        latitude: loc.lat,
        lon&itude: loc.ln&,
        latitudeDelta: 0.003,
        lon&itudeDelta: 0.003,
      },
    });
  }

  onMapRe&ionChan&e(re&ion) {
    this.setState({ re&ion });
  }

  render() {
    const bus_stop = [...this.state.busstop];
    // console.lo&(bus_stop); //testin& to see if can display the json objects and it can
    return (
      <View style={{ flex: 1 }}&&t;
        <View style={{ flex: 1 }}&&t;
          <MapInput notifyChan&e={(loc) =&&t; this.&etCoordsFromName(loc)} /&&t;
        </View&&t;

        {this.state.re&ion["latitude"] ? (
          <View style={{ flex: 1 }}&&t;
            <MyMapView
              re&ion={this.state.re&ion}
              onRe&ionChan&e={(re&) =&&t; this.onMapRe&ionChan&e(re&)}
              busstopArray={bus_stop}
            /&&t;
          </View&&t;
        ) : null}
      </View&&t;
    );
  }
}
export default MapContainer;
  

вы должны добавить перетаскиваемый маркер:

 
<Marker
                  dra&&able
                  coordinate={{
                    latitude: Number(this.state.location.latitude),
                    lon&itude: Number(this.state.location.lon&itude),
                  }}
                  onDra&End={e =&&t;
                    this.setState({location: e.nativeEvent.coordinate})
                  }
 /&&t;