Fatal编程技术网
  • google-maps/
  • Google maps 如何将GoogleMaps API呈现给路由特定的HTML Div元素？

Google maps 如何将GoogleMaps API呈现给路由特定的HTML Div元素？

google-maps meteor reactjs

Google maps 如何将GoogleMaps API呈现给路由特定的HTML Div元素？,google-maps,meteor,reactjs,Google Maps,Meteor,Reactjs,我正在使用React Meteor 1.3和这个google地图包。 我可以成功地将地图渲染到一个单页应用程序，但是只要我将路由添加到混合应用程序中，事情就停止了。特别是当我将元素从索引html模板移动到呈现到页面的JSX组件时，它会中断。我在这里有点不知所措，因为这个问题相当模糊（至少在我的脑海中），我在谷歌上找不到答案 这里发生了什么事？有人有使用flowrouter的软件包的例子吗 我当前的工作设置如下所示 Map.jsx import React from 'react'; impor

我正在使用React Meteor 1.3和这个google地图包。

我可以成功地将地图渲染到一个单页应用程序，但是只要我将路由添加到混合应用程序中，事情就停止了。特别是当我将元素从索引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'));
  });
}

从“React”导入React；
从“react dom”导入react dom；
MyTestMap=React.createClass({
mixins:[数据]，
componentDidMount（）{
load（）；
},
getMeteorData（）{
返回{
loaded:GoogleMaps.loaded（），
mapOptions:GoogleMaps.loaded（）&&this.\u mapOptions（）
};
},
_映射选项（）{
返回{
中心：新谷歌地图LatLng（-37.8136144.9631），
缩放：8
};
},
render（）{
if（this.data.loaded）
返回；
返回装载图。。。；
}
});
GoogleMap=React.createClass({
道具类型：{
名称：React.PropTypes.string.isRequired，
选项：React.PropTypes.object.isRequired
},
componentDidMount（）{
谷歌地图({
名称：this.props.name，
元素：ReactDOM.findDOMNode（this），
选项：this.props.options
});
GoogleMaps.ready（this.props.name，函数（map）{
var marker=new google.maps.marker({
位置：map.options.center，
map:map.instance
});
});
},
组件将卸载（）{
if（GoogleMaps.maps[this.props.name]）{
google.maps.event.clearInstanceListeners（GoogleMaps.maps[this.props.name].instance）；
删除GoogleMaps.maps[this.props.name]；
}
},
render（）{
返回(
)
}
});
if（Meteor.isClient）{
Meteor.startup（函数（）{
返回ReactDOM.render（，document.getElementById（'root'）；
});
}
然后我将其呈现到Index.html文件中-但是这意味着地图在每个页面上

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

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


谷歌地图反应
谢谢

您是否可以将github链接发布到您的项目？也许在这里粘贴代码以显示您正在使用的内容。如果不这样做，我担心你会冒着被“反对者”否决这个问题的风险。如果没有看到一些代码，我将无法帮助您指出正确的方向。谢谢您的提示！是的，不用担心，但如果你还没有-这是一本很好的读物。最好是问一些简短的问题，就像你在StackOverflow上和一个孩子说话一样——否则人们会生气。其他网站更具对话性，你的问题在那里会被完美地格式化。有时添加代码是不够的，从字面上看，你问一个问题会对你从这个网站得到的回复产生很大的影响。你可以在你的项目上发布一个github链接吗？也许在这里粘贴代码以显示您正在使用的内容。如果不这样做，我担心你会冒着被“反对者”否决这个问题的风险。如果没有看到一些代码，我将无法帮助您指出正确的方向。谢谢您的提示！是的，不用担心，但如果你还没有-这是一本很好的读物。最好是问一些简短的问题，就像你在StackOverflow上和一个孩子说话一样——否则人们会生气。其他网站更具对话性，你的问题在那里会被完美地格式化。有时添加代码是不够的，从字面上看，你问一个问题会对你从这个网站得到的回复产生很大的影响。