React Google Maps 不显示 HeatMap ，经纬度不适用于我的职位

Question

This what i want, each marker to be sharing the same position as the lat and lng as the heatmap, the markers are working perfectly 我在向我的热图发送数据时遇到问题，看起来来自谷歌的热图接收到的纬度和经度与标记位置不同？任何想法 ？当我创建一个这样的对象列表数组时，但我希望我的数据读取就像我的标记正在读取它一样。它接收纬度 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"},

Answer 1

根据source code of google-maps-react library，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);

Here is a demo（示例改编自谷歌地图文档）