Question

我正在使用React Meteor 1.3和这个谷歌地图包。 https://github.com/dburles/meteor-google-maps-react-example

我可以成功地将地图呈现为单页应用程序，但是只要我添加路由到混合 - 事情就会停止工作。特别是当我将元素从索引html模板移动到渲染到页面的JSX组件时 - 它会中断。我在这里有点不知所措，因为问题很模糊（至少在我的脑海里）我在谷歌上找不到答案。

这里发生了什么？有没有人有这个包使用flowrouter的例子？

我目前的工作设置看起来像这样。

Map.jsx

import React from 'react';
import ReactDOM from 'react-dom';

MyTestMap = React.createClass({
  mixins: [ReactMeteorData],
  componentDidMount() {
    GoogleMaps.load();
  },
  getMeteorData() {
    return {
      loaded: GoogleMaps.loaded(),
      mapOptions: GoogleMaps.loaded() && this._mapOptions()
    };
  },
  _mapOptions() {
    return {
      center: new google.maps.LatLng(-37.8136, 144.9631),
      zoom: 8
    };
  },
  render() {
    if (this.data.loaded)
      return <GoogleMap name="mymap" options={this.data.mapOptions} />;

    return <div>Loading map...</div>;
  }
});

GoogleMap = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,
    options: React.PropTypes.object.isRequired
  },
  componentDidMount() {
    GoogleMaps.create({
      name: this.props.name,
      element: ReactDOM.findDOMNode(this),
      options: this.props.options
    });

    GoogleMaps.ready(this.props.name, function(map) {
      var marker = new google.maps.Marker({
        position: map.options.center,
        map: map.instance
      });
    });
  },
  componentWillUnmount() {
    if (GoogleMaps.maps[this.props.name]) {
      google.maps.event.clearInstanceListeners(GoogleMaps.maps[this.props.name].instance);
      delete GoogleMaps.maps[this.props.name];
    }
  },
  render() {
    return (
      <div  id="mapId" className="map-container"></div>
)
  }
});

if (Meteor.isClient) {
  Meteor.startup(function() {
    return ReactDOM.render(<MyTestMap />, document.getElementById('root'));
  });
}

然后我将其呈现给Index.html文件 - 但这意味着地图位于每个页面上。

<head>
  <title>googlemaps-react</title>
</head>

<body>
  <div id="root"></div>
</body>

由于

如何将GoogleMaps API渲染为特定于路径的HTML Div元素？

0 个答案: