Как я могу использовать как lat, так и lng для маркеров и карты тепла в картах Google в реакции?Данные разные?мне нужно получить данные из серверной части - PullRequest
0 голосов
/ 06 марта 2019

Это то, что я хочу, чтобы каждый маркер имел ту же позицию, что и широта и долгота У меня проблемы с отправкой данных в мою тепловую карту, похоже, что тепловая карта от Google получает и широту, и долготу иначе, чемпозиции маркеров?любая идея ?когда я создаю массив списка объектов, подобных этому, но я хочу, чтобы мои данные читались так же, как мои маркеры читают их.Он получает M для широты и N для долготы.Если я помещаю его в оболочку, как {this.props.policeCall.map(({ A, M, N }) => {, я получаю сообщение об ошибке, когда делаю свою карту теплопроводности в position={{lat: M , lng:N}}

 const positions = [
  { lat: 32.71248, lng: -117.16769 },
  { lat: 32.702163, lng: -117.151572 },
  { lat: 32.716193, lng: -117.167414 },
  { lat: 32.712494, lng: -117.164703 },
  { lat: 32.709707, lng: -117.169981 },
  { lat: 32.714587, lng: -117.16919 },
  { lat: 32.714715, lng: -117.157309 },
  { lat: 32.71681, lng: -117.157463 },
  { lat: 32.722005, lng: -117.158431 },
  { lat: 32.716848, lng: -117.159111 },
  { lat: 32.745511, lng: -117.207977 },
  { lat: 32.658606, lng: -117.101303 },
  { lat: 32.733247, lng: -117.22652 },
  { lat: 32.72937, lng: -117.233911 },
  { lat: 32.712494, lng: -117.164703 }
];

export class MapContainer extends Component {
  state = {
    showingInfoWindow: false, //Hides or the shows the infoWindow
    activeMarker: {}, //Shows the active marker upon click
    selectedPlace: {} //Shows the infoWindow to the selected place upon a marker
  };

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });

  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  render() {
   
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={{
          lat: 32.71573699,
          lng: -117.16108799
        }}
      >
        {this.props.policeCall.map(({ A, M, N }) => {
          return (
            <Marker
              onClick={this.onMarkerClick}
              name={A}
              position={{ lat: M, lng: N }}
            />
          );
        })}

        {this.props.policeCall.map(({ A, M, N }) => {
          return (
            <HeatMap
              gradient={gradient}
              opacity={3}
              position={{lat: M , lng:N}}
              radius={30}
              
            />
          );
        })}

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <h4>{this.state.selectedPlace.name}</h4>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}

Это то, как мои данные выглядят из json, который читает их. M и N - это широта и долгота. Как это можно вставить в данные моей тепловой карты?

module.exports = [
    {"A": "P17060024503", "B": "6/14/2017 21:54", "C": "4", "D": "10", "E": "", "F": "14TH", "G": "ST", "H": "10 14TH ST, San Diego, CA", "I": "1151", "J": "O", "K": "521", "L": "2", "M": "32.7054489", "N": "-117.1518696"},
    { "A": "P17030051227", "B": "3/29/2017 22:24", "C": "4", "D": "10", "E": "", "F": "14TH", "G": "ST", "H": "10 14TH ST, San Diego, CA", "I": "1016", "J": "A", "K": "521", "L": "2", "M": "32.7054544", "N": "-117.1467137"},
    { "A": "P17060004814", "B": "6/3/2017 18:04", "C": "7", "D": "10", "E": "", "F": "14TH", "G": "ST", "H": "10 14TH ST, San Diego, CA", "I": "1016", "J": "A", "K": "521", "L": "2", "M": "32.7053961", "N": "-117.1444185"},
    { "A": "P17030029336", "B": "3/17/2017 10:57", "C": "6", "D": "10", "E": "", "F": "14TH", "G": "ST", "H": "10 14TH ST, San Diego, CA", "I": "1151", "J": "OT", "K": "521", "L": "2", "M": "32.7054244", "N": "-117.1425917"},
    { "A": "P17030005412", "B": "3/3/2017 23:45", "C": "6", "D": "10", "E": "", "F": "15TH", "G": "ST", "H": "10 15TH ST, San Diego, CA", "I": "911P", "J": "CAN", "K": "521", "L": "2", "M": "32.7055067", "N": "-117.1405936"},
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...