React谷歌地图不显示HeatMap，lat和long不适用于我的职位 [英] React Google Maps not displaying HeatMap , lat and long not working for my positions

问题描述

这就是我想要的，每个标记与lat和lng共享相同的位置热图，标记工作完美我在向热图发送数据时遇到问题，看起来谷歌收到的热图和纬度和经度与标记位置不同？任何的想法 ？当我创建一个像这样的对象列表数组但我希望我的数据读取就像我的标记正在阅读它。它接收M为纬度，N为经度。如果我把它放在像这样的包装器中{this.props.policeCall.map（（{A，M，N}）=> {
i得到一个错误，当我将我的热图位置设为 position = {{lat：M，lng：N}}

 导出类MapContainer扩展Component {state = {showingInfoWindow：false，//隐藏或显示infoWindow activeMarker：{}，//显示点击后选择活动标记selectedPlace：{} //在标记上显示infoWindow到选定位置}; 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（）{retur n（< 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> < /信息窗口> < /地图> ）; }  

这是我的数据从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：2017/3/17 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}， 

<根据源代码 google-maps-react 库， HeatMap 组件需要位置强制属性而不是位置：

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

根据提供的数据格式， HeatMap 可以像这样初始化：

  class MapContainer扩展React.Component {
 
 render（）{
 
 const positions = data.map（item => {return {lat：item.M，lng：item.N}}）; 
 
返回（
< div className =map-container> 
<地图
 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> 
）; 
} 
} 
  

其中数据存储您的JSON数据

最后但并非最不重要的是，确保可视化包已加载（依赖项）到谷歌Heatmaps）：

 导出默认GoogleApiWrapper（{
 apiKey： - 你的关键 -  GOES-HERE - ，
 libraries：[visualization] 
}）（MapContainer）; 
  

这是一个演示（该示例已经改编自谷歌地图文档）

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 Im having problems sending data towards my heatmap, it seems like The heatmap from google receives and latitude and longitude differently than the markers positions? any idea ? when i create an array of list of objects like this but i want my data read just like my markers is reading it. It receive M for latitude and N for longitude. If i put a it inside a wrapper like {this.props.policeCall.map(({ A, M, N }) => { i get an error, when i make my heatmap position into 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>
    );
  }
}

This how my data looks from the json it is reading it M and N is the lat and lng how can inject that to my heatmap data

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

解决方案

According to source code of google-maps-react library, HeatMap component expects positions mandatory property instead of position:

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

Given the provided data format, HeatMap could be initialized like this:

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>
    );
  }
}

where data stores your JSON data

And last but no least, make sure visualization package is loaded (dependency to Google Heatmaps):

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

Here is a demo (the example has been adapted from Google Maps documentation)

这篇关于React谷歌地图不显示HeatMap，lat和long不适用于我的职位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！