在没有react-google-map的情况下呈现Google地图 [英] Rendering a Google Map without react-google-map

问题描述

有没有人能够使用React渲染谷歌地图，而不是使用react-google-map插件？我想这样的事情：

  var MapTab = React.createClass（{
 
 render：函数（）{
 
 return< div className =map-container> 
< div id ='map'>< / div> 
< / div> 
 
}，
 
 componentDidMount：function（）{
 
 console.log（Hello）
 
 
 
 window.onload = function（）{
（函数initMap（）{
 var markers = []; 
 var geocoder = new google.maps.Geocoder （）; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：12，
 center：{lat：37.7749300， lng：-122.4194200} 
}）; 
}）（）; 
} 
 
 
} //结束cdm; 
} ）; 
 module.exports = MapTab; 
  

没有试过的东西已经奏效。我试图用refs捕获地图，但那也没有渲染地图。我已经将Google地图脚本放在标题中（使用键），并验证了该键在vanilla js项目中是有效的。

解决方案

您看起来还不熟悉React组件生命周期。

https：//facebook.github。 io / react / docs / react-component.html＃组件生命周期

或者这个： http://busypeoples.github.io/post/react-component-lifecycle/ （这张表的顺序是哪些反应的方法被执行）实际上，在 componentDidMount（）中（DID-mount意味着元素已经在那里页面，所以你可以开始绑定事件）

React Component的思想很有意思，所以我们不需要使用JavaScript的 window.onload（） 或jQuery的 $（document）.ready（）

因此，您的代码ca修改如下：

  render：function（）{
 return< div className =map-container > 
< div id ='map'>< / div> 
< / div> 
 $，
 
 componentDidMount：function（）{
 
 console.log（Hello）
 
 var markers = []; 
 var geocoder = new google.maps.Geocoder（）; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：12，
 center：{lat：37.7749300，lng： - 122.4194200} 
}）; 
 
} //结束cdm; 
  

PS ：另外，为了显示地图，您需要要正确设置地图容器和地图（需要像素高度，在您的情况下为0 px width，也许您还需要将宽度设置为px或100％）尽管可以自由设计风格！

Has anyone been able to render a google map using React and not using the react-google-map plugin? I'm trying something like this:

var MapTab = React.createClass({

render: function() {

    return  <div className="map-container">
       <div id='map' ></div>
     </div>

},

componentDidMount: function(){

        console.log("Hello")



window.onload = function(){
    (function initMap() {
        var markers = [];
        var geocoder = new google.maps.Geocoder();

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


}// end of cdm;
}); 
module.exports = MapTab;

Nothing I have tried has worked. I have tried capturing the map using refs as well but that did not render the map either. I have placed the google maps script in the header as well (with key) and have verified that the key is valid in a vanilla js project.

解决方案

It seems that you are not familiar with React Component Life Cycle yet.

https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle

or this: http://busypeoples.github.io/post/react-component-lifecycle/ (this has the table of order in which react's methods are executed)

Actually, in the componentDidMount() ("DID-mount" means the element has already been there on the page, so you can start binding events to it)

React Component's idea is interesting, so we don't need to use javascript's "window.onload()" or jQuery's "$(document).ready()"

Therefore, your code can be revised as follows:

render: function() {
    return  <div className="map-container">
       <div id='map' ></div>
     </div>
},

componentDidMount: function(){

    console.log("Hello")

    var markers = [];
    var geocoder = new google.maps.Geocoder();

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

}// end of cdm;

PS: Besides, in order to make the map appear, you need to style the map-container and map correctly (which need a height in pixel, in your case of "0 px width, maybe you need to put the width, too - either in px or 100%) Feel free to style them, though!

这篇关于在没有react-google-map的情况下呈现Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！