react-google-maps 热力图层未定义。

Question

我想使用react-google-maps的HeatmapLayer，但我遇到了以下错误：

Uncaught (in promise) TypeError: Cannot read property 'HeatmapLayer' of undefined

我一直在努力让这个东西工作，但是我没有找到解决方法。同时，在这个链接中也没有什么有用的信息： (https://github.com/tomchentw/react-google-maps/issues/409)

import {withGoogleMap,GoogleMap} from "react-google-maps"
import HeatmapLayer from "react-google-maps/lib/visualization/HeatmapLayer"

render(){

var data = [new window.google.maps.LatLng(37.782551, -122.445368),
            new window.google.maps.LatLng(37.782745, -122.444586),
            new window.google.maps.LatLng(37.782842, -122.443688),
            new window.google.maps.LatLng(37.782919, -122.442815),
            new window.google.maps.LatLng(37.782992, -122.442112),
            new window.google.maps.LatLng(37.783100, -122.441461)
      ]
  const Heatmap = withGoogleMap(props => (
<GoogleMap
    defaultZoom={1}
    center={{lat: 19.435031,lng: -99.167357}}
>
<HeatmapLayer data = {data} />
</GoogleMap>));

return(
  <div className="googleMap">
<Heatmap
  containerElement={
    <div style={{ height: `100%` }} />
  }
  mapElement={
    <div style={{ height: `100%` }} />
  }
  center={{ lat: -25.363882, lng: 131.044922 }}
/>
</div>)
}
}

- Erick Vivanco

Answer 1

我认为你的导入位置是错误的。应该像下面这样。更多信息在这里

import HeatmapLayer from "react-google-maps/lib/components/visualization/HeatmapLayer";

- bennygenel

---

这只是一个错误的变化 未捕获（承诺中的）错误：您是否在URL中包含“libraries=visualization”？。 - Erick Vivanco

我正在使用版本8.0.0。 - Erick Vivanco

未处理的Promise错误：您在URL中是否包含“libraries=visualization”？ 这基本上回答了您的问题。 - Tom Chen

@erick-vivanco，你找到解决方法了吗？我也遇到了同样的问题。 - Piqué

@Piqué 是的，只需要添加“libraries=visualization”就可以了。 - Erick Vivanco

Answer 2

请查看“使用库”部分：

见Using the library：

https://developers.google.com/maps/documentation/javascript/visualization

- Tom Chen

Answer 3

要在Google Maps React中访问可视化库，您可以像这样操作

/*global google*/
import React, {
  Component
} from React;
import {
  GoogleApiWrapper,
  Map
} from "google-maps-react";

class YourComponent extends Component {
constructor(props){
super(props);
this.mapRef= React.createRef();
}

componentDidMount(){
    //you can access your visualization lib through this
    console.log(google.maps.visualization);
    
    //you can access you map reference through
    this.mapRef.current.map
}

  render() {
    return <Map ref={this.mapRef} { /*defaults for the map here*/ } >
      <
      /Map>
  }
}

export default GoogleApiWrapper((props) => ({
  apiKey: yourapikey,
  libraries: ["visualization"],
}))(YourComponent);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

- RASHON KIPTOO