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

您需要将new google.maps.LatLng移到withScriptJs渲染功能中。将其置于渲染功能之外会导致浏览器在脚本加载完成之前尝试使用Google Maps 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>
  );
});

react-google-maps HeatmapLayer：无法读取未定义的属性“地图”

1 个答案: