Question

我想从react-google-maps中使用HeatmapLayer，但我得到错误的打击：

未捕获（承诺）TypeError：无法读取属性'HeatmapLayer' 未定义的

我一直在努力使这件事有效，但我无法击中头部，也看着这个链接那里没有什么帮助（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>)
}
}

Answer 1

我相信您的导入位置是错误的。它应该如下。更多信息here

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

Answer 2

请参阅使用图书馆部分：

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

Answer 3

要在Google Maps React Create中访问可视化库，您可以执行以下操作

/*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>

react-google-maps HeatmapLayer undefined

3 个答案: