Question

react-google-maps的最新更改似乎删除了mapHolderRef属性以访问地图实例。查看新的组件更改，看起来它们称为内部常量上下文引用，但它看起来似乎不应该使用/容易暴露。

在最新版本之前，我可以执行以下操作，向地图添加自定义控件：

paintControl(props) {
  const { rendered } = this.state;
  const position = props.position || google.maps.ControlPosition.TOP_CENTER;
  const map = props.mapHolderRef.getMap(); // This no longer works
  const controlElement = React.createElement(props.customControl, { map, ...props });

  ReactDOM.render(controlElement, this.customControlDiv);
  this.customControlDiv.style.zIndex = this.props.zIndex || 1;

  if (!rendered) {
    this.setState({ rendered: true }, () => {
      map.controls[position].push(this.customControlDiv);
    });
  }
}

在6.0版本中有提及这个mapHolderRef属性的注释不再可以通过props访问，而是通过上下文来访问。我试过让它起作用，但似乎无法解决这个问题。

我目前正在使用onMapLoad回调来获取反应地图实例，但似乎缺少实际的谷歌地图参考。通过这样做，我已经能够获得可用的参考：

const map = props.mapHolderRef.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

但这看起来真的很笨拙和不正确。它也创建了多个控件而不是维护它，所以有些东西在那里。不确定我错过了新文档中的某些内容，或者新版本中是否提供这些内容。

有没有人幸运获得自定义控件或组件以使用新的react-google-maps版本？

感谢您的帮助！

Answer 1

要添加到Max的答案，这就是我最终使用v7.2.0在代码中使用它的方式：

import { MAP } from 'react-google-maps/lib/constants';

export default class CustomControl extends Component {
  static contextTypes = { [MAP]: PropTypes.object };

  ...

  // this.context[MAP] returns the google map instance object
  if (this.context[MAP]) {
    const map = this.context[MAP];
    map.controls[position].push(this.customControlDiv);
  }

Answer 2

即使在v7.2中似乎也没有理想的解决方案，但是从7.0开始引入了list of constants，它以更优雅的方式链接到已弃用的引用：

import { MAP } from 'react-google-maps/lib/constants

见this Github commment - 它得到了回购所有者的支持。

使用React-google-maps v6 +

2 个答案: