javascript - React Google Maps 不显示 HeatMap ,lat 和 long 不适用于我的职位
问题描述
这就是我想要的,每个标记与热图的 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"},
解决方案
根据库的源代码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 文档)
推荐阅读
- javascript - 与 Vanilla JavaScript 相比,jQuery 是否简化了选择相关节点?
- node.js - Node/Apollo/GraphQL - 关于在 Apollo 服务器插件中使用 async/await 的建议
- powershell - 从 Invoke-Command 检索产生错误的计算机名称
- mill - 具有非文件产品的铣削任务是否应该产生类似于 PathRef 的东西?
- azure-devops - Azure Devops 从 TFVC 迁移到 Git
- python - 在 Windows 上编辑 UTF-8 文本文件
- python - Python中点云到网格的距离
- java - 如何在春季安全中设置登录到期时间
- javascript - 如何在 JavaScript 中简化这一点?
- solr - Solr for TYPO3 是否具有动态范围方面?