在没有react-google-map的情况下渲染Google地图

问题描述 投票:8回答:4

有没有人能够使用React渲染谷歌地图而不使用react-google-map插件?我正在尝试这样的事情:

var MapTab = React.createClass({

render: function() {

    return  <div className="map-container">
       <div id='map' ></div>
     </div>

},

componentDidMount: function(){

        console.log("Hello")



window.onload = function(){
    (function initMap() {
        var markers = [];
        var geocoder = new google.maps.Geocoder();

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 37.7749300, lng: -122.4194200}
        });
    })(); 
}


}// end of cdm;
}); 
module.exports = MapTab;

我没有尝试过任何工作。我也尝试使用refs捕获地图,但也没有渲染地图。我已经将google地图脚本放在标题中(使用键),并验证了密钥在vanilla js项目中是有效的。

google-maps-api-3 reactjs
4个回答
2
投票

使用componentDidMount,您知道地图容器div已加载,但您无法保证外部地图api已加载。 Google为您提供了一个回调函数选项(示例中为initMap())。

https://maps.googleapis.com/maps/api/js?key=&回调= initMap

现在,您可以按照以下步骤操作:在地图组件安装完成后,您可以:

  1. window.initMap = this.initMap使initMap from response可用于谷歌地图回调。
  2. 使用initMap参数加载google地图JS。
  3. 在组件中的this.initMap中,您可以执行地图内容,因为现在您知道您的容器和Google API已加载。 const React = require('react') const PropTypes = require('prop-types') import Reflux from 'reflux' const Radium = require('radium') class Map extends Reflux.Component { constructor(props) { super(props) this.loadJS = this.loadJS.bind(this) this.initMap = this.initMap.bind(this) } componentDidMount() { window.initMap = this.initMap; if (typeof google === 'object' && typeof google.maps === 'object') { this.initMap() } else { this.loadJS('https://maps.googleapis.com/maps/api/js?key=<API_KEY>&callback=initMap') } } // https://github.com/filamentgroup/loadJS/blob/master/loadJS.js loadJS(src) { var ref = window.document.getElementsByTagName("script")[0]; var script = window.document.createElement("script"); script.src = src; script.async = true; ref.parentNode.insertBefore(script, ref); } initMap() { var map = new google.maps.Map(this.refs.map, { center: {lat: -34.397, lng: 150.644}, zoom: 8 }) } render() { return (<div ref='map'></div>) } } module.exports = Radium(Map)

1
投票

摆脱window.onload。当componentDidMount方法被调用时,窗口已经被加载,所以你的initMap()函数永远不会被激活。


1
投票

您似乎还不熟悉React组件生命周期。

https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle

或者:http://busypeoples.github.io/post/react-component-lifecycle/(这里有执行react方法的顺序表)

实际上,在componentDidMount()中(“DID-mount”表示该元素已经存在于页面上,因此您可以开始将事件绑定到它)

React Component的想法很有趣,所以我们不需要使用javascript“window.onload()”vs jQuery“$(document).ready()”

因此,您的代码可以修改如下:

render: function() {
    return  <div className="map-container">
       <div id='map' ></div>
     </div>
},

componentDidMount: function(){

    console.log("Hello")

    var markers = [];
    var geocoder = new google.maps.Geocoder();

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.7749300, lng: -122.4194200}
    });

}// end of cdm;

PS:此外,为了使地图显示,你需要设置地图容器的样式并正确地映射(在像素中需要高度,在你的情况下为“0 px宽度,也许你需要放宽度 - 无论是px还是100%)尽管如此,请随意设计它们!


0
投票

您可以使用React Refs轻松渲染谷歌地图这是与第三方库集成时的理想解决方案。像这样:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      // no state for now..
    }

    // Use createRef() to create a reference to the DOM node we want
    this.myMapContainer = React.createRef()
  }

  componentDidMount() {
    // Instead of using: document.getElementById, use the ref we created earlier to access the element
    let map = new google.maps.Map(this.myMapContainer.current, {
      center: { lat: -34.9973268, lng: -58.582614 },
      scrollwheel: false,
      zoom: 4
    })
  }

  render() {
    return (
      <div className="container">
        <div ref={this.myMapContainer} id="map"></div>
        <div id="text"><p>Google Maps now requires the use of a valid API Key.
          That's why you see the popup window "This page can't load Google Maps correctly."</p>
          <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Go get one!</a>
        </div>
      </div>
    )
  }
}

Working Example here

注意:不要忘记放置调用Google Maps API的<script>。如果您使用create-react-app创建项目,则可以将脚本放在public/index.html

© www.soinside.com 2019 - 2024. All rights reserved.