如何在反應項目中導入谷歌地圖

我在我的項目中使用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>

來源

2016-04-13 Zhao Yi

我會留下這個評論，但我沒有評論的權力呢。您是否已嘗試將該組件渲染爲從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('...') 
); 
}

我沒有看到你在任何地方創建組件的新實例，但我認爲你做。

來源

2016-04-14 05:01:24

如何鏈接html到我的組件？我把所有的js都打包成了一個大的js文件，並且從我的html中引用它。如果我把回調放到html中，它如何鏈接到我的js或組件？ –

您的內聯腳本可以引用外部腳本，因爲它們都位於全局名稱空間內。 –

我實現了兩個回調成功和錯誤的函數，並檢查谷歌是否加載。如果不`噸裝好開始加載使用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(); 
}

來源

2016-09-14 16:08:29 omelniz

如何在反應項目中導入谷歌地圖

回答

相關問題