流星的谷歌地图

Question

我在 Meteor 中安装了“meteor add dburles:google-maps”。我将此代码添加到 React 组件中，

...
import { GoogleMaps } from 'meteor/dburles:google-maps';
...
export default class Location extends TrackerReact(React.Component){
constructor(props) {
    super(props);
    this.state = {
        ...
    };
    GoogleMaps.load();
}
componentDidUpdate(){
    GoogleMaps.create({
      name: 'exampleMap',
      element: document.getElementById('basic_map'),
      options: {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      }
    });
}
render() {
    ...
    return (
        ...
                    <div id="basic_map" style={{"width":"300px","height":"300px"}}></div>
        ...
    )
}

这里的问题是“google not defined”错误。我想是来自这行代码，

google.maps.LatLng(-37.8136, 144.9631),

我在安装过程中遗漏了什么吗？我怎样才能解决这个问题？ 我正在使用 Meteor、ReactJs、Flow 路由器和 TrackerReact

Answer 1

那是因为 google 尚未加载。请务必在点击创建之前检查GoogleMaps.loaded()。

作者 David Burles 写了一个很好的 example using the library with react，应该会有所帮助。它使用 createContainer 而不是 TrackerReact 但应该让你走上正轨。