Реагируйте, что Google Maps не отображают HeatMap, lat и long, не работают для моих позиций - PullRequest
Новая
       29

Реагируйте, что Google Maps не отображают HeatMap, lat и long, не работают для моих позиций

0 голосов
/ 11 марта 2019

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

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"},

1 Ответ

0 голосов
/ 13 марта 2019

Согласно исходному коду google-maps-react библиотеки , HeatMap компонент ожидает positions обязательное свойство вместо position: 

       <HeatMap
          gradient={gradient}
          opacity={3}
          position={{lat: M , lng:N}}
          ^^^^^^^^^^^^^^^^^^^^^^^^^^
          radius={30}
        />

Учитывая предоставленный формат данных,HeatMap можно инициализировать следующим образом: 

class MapContainer extends React.Component {

  render() {

    const positions = data.map(item => { return { "lat": item.M, "lng": item.N}});

    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
        >
          <HeatMap
            gradient={gradient}
            positions={positions}
            opacity={1}
            radius={20}
          />
        </Map>
      </div>
    );
  }
}

, где data хранит ваши данные JSON

И, наконец, что не менее важно, убедитесь, что пакет visualization загружен (зависимость от GoogleТепловые карты): 

export default GoogleApiWrapper({
  apiKey: "--YOUR-KEY-GOES-HERE--",
  libraries: ["visualization"]
})(MapContainer);

Вот демонстрационная версия (пример был адаптирован из документации Google Maps)

...