流星的Google地图 [英] Google map for meteor

问题描述

我在Meteor安装了meteor add dburles：google-maps。我将这段代码添加到React组件中，
$ b

  ... 
从'meteor / dburles'中导入{GoogleMaps}谷歌地图'; 
 ... 
导出默认类位置extends TrackerReact（React.Component）{
构造函数（道具）{
 super（道具）; 
 this.state = {
 ... 
}; 
 GoogleMaps.load（）; 
} 
 componentDidUpdate（）{
 GoogleMaps.create（{
 name：'exampleMap'，
 element：document.getElementById（'basic_map'），
选项：{
 center：new google.maps.LatLng（-37.8136,144.9631），
 zoom：8 
} 
}）; 
 
 render（）{
 ... 
 return（
 ... 
< div id =basic_mapstyle = {{ width：300px，height：300px}}>< / div> 
 ... 
）
} 
  

这里的问题是错误google not defined。我认为它来自这一行代码，

  google.maps.LatLng（-37.8136,144.9631），
  

我在安装时错过了什么吗？我怎样才能解决这个问题？
我使用Meteor，ReactJs，Flow路由器和TrackerReact

解决方案

这是因为google尚未加载。在创建之前，请确保检查 GoogleMaps.loaded（）。

作者David Burles写了一篇文章漂亮的使用该库的示例反应，这应该是有帮助的。它使用createContainer而不是TrackerReact，但应该让你走上正轨。

I install "meteor add dburles:google-maps" in Meteor. I added this code to the React Component,

...
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>
        ...
    )
}

The problem here is the error "google not defined". I think it is from this line of code,

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

Did I miss something in installation? How can I fix this? I am using Meteor, ReactJs, Flow router and TrackerReact

解决方案

That's because google hasn't been loaded yet. Make sure to check GoogleMaps.loaded() before you hit create.

The author, David Burles, wrote a nice example using the library with react, which should be helpful. It uses createContainer instead of TrackerReact but should get you on the right track.

这篇关于流星的Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！