1

这就是我想要的，每个标记与热图的 lat 和 lng 共享相同的位置，标记工作正常我在向我的热图发送数据时遇到问题，看起来来自谷歌的热图接收和纬度和经度不同于标记位置？任何想法 ？当我创建一个这样的对象列表数组但我希望我的数据读取就像我的标记正在读取它一样。它接收纬度 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 是 lat 和 lng 如何将其注入我的热图数据 

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

4

1 回答 1

1

根据库的源代码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>
    );
  }
}

dataJSON 数据存储在哪里

最后但同样重要的是，确保visualization已加载包（依赖于 Google 热图）：

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

这是一个演示（该示例已改编自 Google Maps 文档）

于 2019-03-13T08:43:16.767 回答