使用React-google-maps訪問地圖參考v6 +

對react-google-maps的最新更改似乎已刪除mapHolderRef屬性以訪問地圖實例。看看新的組件更改，它看起來像他們調用內部常量上下文引用，但它似乎不應該使用/容易暴露。使用React-google-maps訪問地圖參考v6 +

最新版本之前，我能夠這樣做下面一個自定義的控件添加到地圖：

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財產筆記不再通過道具訪問，而是通過上下文來代替。我試圖讓它工作，但似乎無法弄清楚。

我目前使用onMapLoad回調得到反應地圖實例，但得到實際的谷歌地圖參考似乎缺少。我已經能夠通過這樣做得到一個可用的參考：

const map = props.mapHolderRef.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

但是，這似乎真的很難和不正確。它還創建了多個控件，而不是保持一個，所以有些東西就在那裏。不確定新文檔中是否存在我遺漏的內容，或者如果這在新版本中不可用。

有沒有人有運氣獲得自定義控件或組件與新的react-google-maps版本？

感謝您的幫助！

來源

2017-05-31 xveganxxxedgex

似乎有這種不理想的解決方案，即使在v7.2中，但也有引入的7.0鏈接到棄用的引用在一個更優雅的方式list of constants：

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

見this Github commment - 它被回購所有者認可。

來源

2017-07-19 11:27:23 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); 
    }

來源

2017-07-25 20:38:15 xveganxxxedgex

使用React-google-maps訪問地圖參考v6 +

回答

相關問題