react-google-maps HeatmapLayer：无法读取未定义的属性"maps"

Question

import React from 'react'
const { compose, withProps, withStateHandlers } = require('recompose')
const {
withScriptjs,
withGoogleMap,
GoogleMap,
LatLng
} = require('react-google-maps')
import { connect } from 'react-redux'
import { MapInfoWindow } from './MapInfoWindow'
import HeatmapLayer from "react-google-maps/lib/components/visualization/HeatmapLayer";
class HeatMap extends React.Component {
render() {
var data = [new window.google.maps.LatLng(40.705076, -74.00916)]
const HomeMap = compose(withScriptjs, withGoogleMap)(props => {
(
<GoogleMap defaultZoom={9} defaultCenter={{ lat: 40.705076, lng: -74.00916 }}>
{props.pools ? (
props.pools.map(pool => <MapInfoWindow key={pool.id} pool={pool} />)
) : (
<div />
)}
<HeatmapLayer data={data}/>
</GoogleMap>
)})
return (
<div className='googleMap'>
<HomeMap
googleMapURL="https://maps.googleapis.com/maps/api/js?key=###=3.exp&libraries=visualization,geometry,drawing,places"
loadingElement={<div style={{height: `100%`}} />}
containerElement={<div style={{height: `600px`}} />}
mapElement={<div style={{height: `100%`}} />}
/>
</div>
)
}
}
export default connect(mapState, mapDispatch)(HeatMap)

我一直在尝试使热图工作，但不断收到错误：

maps在new window.google.maps.LatLng(40.705076, -74.00916)中未定义。

我也尝试过new google.maps.LatLng(40.705076, -74.00916)但我遇到了同样的错误。

有什么想法或建议吗？谢谢

Answer 1

您需要在withScriptJs渲染函数内部移动new google.maps.LatLng。将其置于渲染函数之外会导致浏览器在脚本完成加载之前尝试使用 Google 地图 API。类似于下面的示例。

const HomeMap = compose(withScriptjs, withGoogleMap)(props => {
const data = [new window.google.maps.LatLng(40.705076, -74.00916)];
return (
<GoogleMap defaultZoom={9} defaultCenter={{ lat: 40.705076, lng: -74.00916 }}>
<HeatmapLayer data={data}/>
</GoogleMap>
);
});