Google 流星地图

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 router 和 TrackerReact

Answer 1

那是因为 google 还没有加载。确保在点击创建之前检查 GoogleMaps.loaded()。

作者 David Burles 写了一篇不错的 example using the library with react，应该会有帮助。它使用 createContainer 而不是 TrackerReact，但应该让您走上正确的轨道。

Google 流星地图

Google map for meteor

javascript

google-maps

reactjs

meteor

flow-router