Question

我需要在我的应用中做一些事情。 1.加载Google Maps API 2.初始化我的地图 3.获取对google变量的引用，并使用它来创建事件侦听器并扩展它包含的ImageOverlay类

目前我正在使用this pattern，因此我可以通过google引用window.google。然后在我的initMap中，我设置了一个事件监听器并且做了 ```

ImageOverlay.prototype = new window.google.maps.OverlayView();

function ImageOverlay(bounds, image, map) {
    ...do constructory stuff
  }

  ImageOverlay.prototype.onAdd = function() {

    ...
  };

创建我需要的类（来自the G Maps docs）。我想将此代码移动到外部文件，但我仍然坚持如何清理它。我收到'ImageOverlay' is not defined等错误。如果我尝试将其设置为ES6类（export default class ImageOverlay extends window.google.maps.OverlayView {然后import ImageOverlay ...），则会失败，因为尚未定义window.google。所以我的问题是，如何正确加载该类然后扩展它？如果我需要提供更多细节/澄清任何内容，请告诉我。 TIA。

替代问题：我使用react-async-script-loader加载API：export default scriptLoader(['https://maps.googleapis.com/maps/api/js?key=whoop&callback=initMap&libraries=visualization'])(MapContainer)但是，此组件位于顶部import Map，而import ImageOverlay依次为google，当然，这是失败的，因为(x, y) = c;尚未定义。

Answer 1

好的，这就是我最终解决问题的方法：

import scriptLoader from 'react-async-script-loader'
class MapContainer extends Component {...}

export default scriptLoader(['https://maps.googleapis.com/maps/api/js?key=mykey&libraries=visualization'])(MapContainer)

....

class Map extends Component {
  componentDidMount() {
    var ImageOverlay = require('../Util/ImageOverlay.js').default;

...
export default class ImageOverlay extends window.google.maps.OverlayView { ... }

最大的事情是使用require(~).default（可以动态导入）而不是React文件顶部的导入。然后，您可以确保window.google.maps可以访问，并且该类在尝试加载api之前不会尝试扩展它。您甚至可以将maps作为道具传递给Map组件。

如何正确扩展从React中的外部站点加载的JS类

1 个答案: