带有 React 的 Google Maps v3 Grey Box答案

【问题标题】：Google Maps v3 Grey Box with React带有 React 的 Google Maps v3 Grey Box
【发布时间】：2016-04-20 05:58:12
【问题描述】：

大家好，我正在尝试将谷歌地图添加到 React 项目中，但我得到一个没有错误的灰色框。知道为什么。代码如下：

componentDidMount: function(){


    function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.7749300, lng: -122.4194200},
        mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    };
        initMap(); 

 }// end of cdm;
});

【问题讨论】：

我注意到当我拉伸屏幕时该框呈现。我试过 google.maps.event.addListenerOnce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); });但它没有解决问题
相同问题的相同答案^^！ stackoverflow.com/questions/34779489/…

标签： google-maps-api-3 reactjs

【解决方案1】：

您不应该使用 document.getElementByID('map')。这是您尝试渲染 google.maps 容器的组件内的一个节点吗？

这应该看起来像

function renderMap() {
    // map node
    var mapNode = ReactDOM.findDOMNode(this.refs.map);
    new google.maps.Map(mapNode, {
        zoom: 12,
        center: {lat: 37.7749300, lng: -122.4194200},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

你需要添加 react-dom 作为依赖。

【讨论】：