2016-04-13 26 views
1

我在我的项目中使用webpack和reactjs,现在我想整合google map api。首先,我在我的package.json文件中添加了“react-google-maps”:“^ 4.9.1”。以下是我的组件类。如何在反应项目中导入谷歌地图

import React, {PropTypes, Component} from 'react'; 

import { GoogleMap, Marker, SearchBox } from "react-google-maps"; 
import shouldPureComponentUpdate from 'react-pure-render/function'; 

const greatPlaceStyle = { 
    // initially any map object has left top corner at lat lng coordinates 
    // it's on you to set object origin to 0,0 coordinates 
    position: 'absolute', 
    width: 512, 
    height: 512, 
    left: 512/2, 
    top: 512/2, 

    border: '5px solid #f44336', 
    borderRadius: 512, 
    backgroundColor: 'white', 
    textAlign: 'center', 
    color: '#3f51b5', 
    fontSize: 16, 
    fontWeight: 'bold', 
    padding: 4 
}; 

export default class SimpleMapPage extends Component { 
    static defaultProps = { 
    center: {lat: 59.938043, lng: 30.337157}, 
    zoom: 1, 
    greatPlaceCoords: {lat: 59.724465, lng: 30.080121} 
    }; 

    shouldComponentUpdate = shouldPureComponentUpdate; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <GoogleMap> 

     defaultCenter={this.props.center} 
     defaultZoom={this.props.zoom}> 

     <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} /> 
     <MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} /> 

     </GoogleMap> 
    ); 
    } 
} 

export default class MyGreatPlace extends Component { 
    static propTypes = { 
    text: PropTypes.string 
    }; 

    static defaultProps = {}; 

    //shouldComponentUpdate = shouldPureComponentUpdate; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <div style={greatPlaceStyle}> 
      {this.props.text} 
     </div> 
    ); 
    } 
} 

在我的index.html文件中,我在下面添加了javascripts。第一个是goold map api dependency。第二个是由webpack打包的bundle.js。当我访问我的应用程序时,谷歌地图没有显示出来。我认为这个问题将无法导入我的组件类的谷歌地图API。什么是导入googleapis的正确方法?

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2sDQZ-36NLlY4iMvoiuQ7mS1n-v8iq2M" async defer></script> 
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script> 

回答

0

我会留下这个评论,但我没有评论的权力呢。您是否已尝试将该组件渲染为从Google Maps请求回拨的一部分?我想知道请求的异步性质是否影响其显示。

考虑包括你的谷歌地图这样的:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
    async defer></script> 

在你的代码:

let initMap =() => { 
    ReactDOM.render(
    <SimpleMapPage />, 
    document.getElementById('...') 
); 
} 

我没有看到你在任何地方创建组件的新实例,但我认为你做。

+0

如何链接html到我的组件?我把所有的js都打包成了一个大的js文件,并且从我的html中引用它。如果我把回调放到html中,它如何链接到我的js或组件? –

+0

您的内联脚本可以引用外部脚本,因为它们都位于全局名称空间内。 –

1

我实现了两个回调成功和错误的函数,并检查谷歌是否加载。如果不`吨装好开始加载使用load-script用于追加剧本节点的元素在DOM

import loadScript from 'load-script'; 

const HOST = 'https://maps.googleapis.com/maps/api/js'; 
const KEY = 'YOUR API KEY'; 
const URL = `${HOST}?key=${KEY}&libraries=places`; 

const loadGoogleMapApi = (
    success =() => {}, 
    error =() => {} 
) => { 
    if (window.google) { 
    success(); 
    } else { 
    loadScript(URL, err => { 
     const callback = err ? error : success; 
     callback(); 
    }); 
    } 
}; 

export default loadGoogleMapApi; 

然后,我用这个功能我的反应成分这样的:

initialize() { 
    this.api = L.map(this.map); 
    this.markers = L.featureGroup(); 

    this.api.addLayer(this.markers); 

    loadGoogleMapApi(() => { 
    this.api.addLayer(new L.Google('ROADMAP')); 
    }); 
} 

componentDidMount() { 
    this.initialize(); 
    this.draw(); 
}