有没有人能够使用React渲染谷歌地图而不使用react-google-map插件？我正在尝试这样的事情：
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;
我没有尝试过任何工作。我也尝试使用refs捕获地图，但也没有渲染地图。我已经将google地图脚本放在标题中（使用键），并验证了密钥在vanilla js项目中是有效的。
使用componentDidMount，您知道地图容器div已加载，但您无法保证外部地图api已加载。 Google为您提供了一个回调函数选项（示例中为initMap（））。
https://maps.googleapis.com/maps/api/js?key=＆回调= initMap
现在，您可以按照以下步骤操作：在地图组件安装完成后，您可以：
const React = require('react')
const PropTypes = require('prop-types')
import Reflux from 'reflux'
const Radium = require('radium')
class Map extends Reflux.Component {
constructor(props) {
super(props)
this.loadJS = this.loadJS.bind(this)
this.initMap = this.initMap.bind(this)
}
componentDidMount() {
window.initMap = this.initMap;
if (typeof google === 'object' && typeof google.maps === 'object') {
this.initMap()
} else {
this.loadJS('https://maps.googleapis.com/maps/api/js?key=<API_KEY>&callback=initMap')
}
}
// https://github.com/filamentgroup/loadJS/blob/master/loadJS.js
loadJS(src) {
var ref = window.document.getElementsByTagName("script")[0];
var script = window.document.createElement("script");
script.src = src;
script.async = true;
ref.parentNode.insertBefore(script, ref);
}
initMap() {
var map = new google.maps.Map(this.refs.map, {
center: {lat: -34.397, lng: 150.644},
zoom: 8
})
}
render() {
return (<div ref='map'></div>)
}
}
module.exports = Radium(Map)
摆脱window.onload。当componentDidMount方法被调用时，窗口已经被加载，所以你的initMap()函数永远不会被激活。
您似乎还不熟悉React组件生命周期。
https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle
或者：http://busypeoples.github.io/post/react-component-lifecycle/（这里有执行react方法的顺序表）
实际上，在componentDidMount（）中（“DID-mount”表示该元素已经存在于页面上，因此您可以开始将事件绑定到它）
React Component的想法很有趣，所以我们不需要使用javascript“window.onload（）”vs jQuery“$（document）.ready（）”
因此，您的代码可以修改如下：
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：此外，为了使地图显示，你需要设置地图容器的样式并正确地映射（在像素中需要高度，在你的情况下为“0 px宽度，也许你需要放宽度 - 无论是px还是100％）尽管如此，请随意设计它们！
您可以使用React Refs轻松渲染谷歌地图这是与第三方库集成时的理想解决方案。像这样：
class App extends React.Component {
constructor(props){
super(props)
this.state = {
// no state for now..
}
// Use createRef() to create a reference to the DOM node we want
this.myMapContainer = React.createRef()
}
componentDidMount() {
// Instead of using: document.getElementById, use the ref we created earlier to access the element
let map = new google.maps.Map(this.myMapContainer.current, {
center: { lat: -34.9973268, lng: -58.582614 },
scrollwheel: false,
zoom: 4
})
}
render() {
return (
<div className="container">
<div ref={this.myMapContainer} id="map"></div>
<div id="text"><p>Google Maps now requires the use of a valid API Key.
That's why you see the popup window "This page can't load Google Maps correctly."</p>
<a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Go get one!</a>
</div>
</div>
)
}
}
注意：不要忘记放置调用Google Maps API的<script>。如果您使用create-react-app创建项目，则可以将脚本放在public/index.html中