如何在React项目中导入谷歌地图

Joey Yi Zhao

我在我的项目中使用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依赖项。第二个是由webpack打包的bundle.js。当我访问我的应用程序时,没有显示谷歌地图。我认为问题将无法在我的组件类上导入google map 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>
张以z

我本来可以发表评论,但我还没有发表评论的权力。您是否尝试过将组件呈现为从请求到Google Maps的回调的一部分?我想知道请求的异步性质是否正在影响其显示。

考虑像这样包含您的Google地图:

<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('...')
  );
}

我没有看到您在任何地方创建该组件的新实例,但是我认为您已经创建了。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在scalajs项目中的“ Build.scala”中导入“ %%%”?

来自分类Dev

如何在Swift项目中导入LinkedIn SDK?

来自分类Dev

如何在Maven项目中导入普通枚举?

来自分类Dev

如何在scalajs项目中的“ Build.scala”中导入“ %%%”?

来自分类Dev

如何在Swift项目中导入LinkedIn SDK?

来自分类Dev

在 React 项目中导入 Unity 文件

来自分类Dev

如何在我的 Typescript Create React App 项目中导入伪造 sha256 哈希函数?

来自分类Dev

如何在pygame中导入tmx地图?

来自分类常见问题

如何在Objective-C项目中导入和使用Swift Pod框架

来自分类Dev

如何在我的Android Studio 1.0空项目中导入AltBeacon库

来自分类Dev

如何在WPF项目中导入windows.media.capture?

来自分类Dev

如何在Swift项目中导入目标C头文件

来自分类Dev

如何在角度项目中导入PDFjs-dist以了解pdf文件的视口

来自分类Dev

如何在我的Angular 7项目中导入农业网格企业

来自分类Dev

KMM如何在当前项目中导入生成的Greeting类?

来自分类Dev

如何在Swift项目中导入目标C头文件

来自分类Dev

如何在打字稿项目中导入外部 javascript 库

来自分类Dev

如何在 angular scss 项目中导入 ngx-datatable css 样式

来自分类Dev

在项目中导入FlowTextView

来自分类Dev

无法在 Gulp 项目中导入 React Router Dom

来自分类Dev

如何在Eclipse中导入Ionic项目

来自分类Dev

如何在Postman中导入SoapUI项目?

来自分类Dev

如何在eclipse中导入java项目?

来自分类Dev

如何从打字稿项目中导入npm包?

来自分类Dev

如何在React中导入函数Component?

来自分类Dev

如何在React中导入Bootstrap组件?

来自分类Dev

如何从普通JavaScript文件或简单节点项目中的React外部的normalizr节点包中导入标准化模式功能

来自分类Dev

如何获得导入谷歌地图?

来自分类Dev

在Django项目中导入应用

Related 相关文章

  1. 1

    如何在scalajs项目中的“ Build.scala”中导入“ %%%”?

  2. 2

    如何在Swift项目中导入LinkedIn SDK?

  3. 3

    如何在Maven项目中导入普通枚举?

  4. 4

    如何在scalajs项目中的“ Build.scala”中导入“ %%%”?

  5. 5

    如何在Swift项目中导入LinkedIn SDK?

  6. 6

    在 React 项目中导入 Unity 文件

  7. 7

    如何在我的 Typescript Create React App 项目中导入伪造 sha256 哈希函数?

  8. 8

    如何在pygame中导入tmx地图?

  9. 9

    如何在Objective-C项目中导入和使用Swift Pod框架

  10. 10

    如何在我的Android Studio 1.0空项目中导入AltBeacon库

  11. 11

    如何在WPF项目中导入windows.media.capture?

  12. 12

    如何在Swift项目中导入目标C头文件

  13. 13

    如何在角度项目中导入PDFjs-dist以了解pdf文件的视口

  14. 14

    如何在我的Angular 7项目中导入农业网格企业

  15. 15

    KMM如何在当前项目中导入生成的Greeting类?

  16. 16

    如何在Swift项目中导入目标C头文件

  17. 17

    如何在打字稿项目中导入外部 javascript 库

  18. 18

    如何在 angular scss 项目中导入 ngx-datatable css 样式

  19. 19

    在项目中导入FlowTextView

  20. 20

    无法在 Gulp 项目中导入 React Router Dom

  21. 21

    如何在Eclipse中导入Ionic项目

  22. 22

    如何在Postman中导入SoapUI项目?

  23. 23

    如何在eclipse中导入java项目?

  24. 24

    如何从打字稿项目中导入npm包?

  25. 25

    如何在React中导入函数Component?

  26. 26

    如何在React中导入Bootstrap组件?

  27. 27

    如何从普通JavaScript文件或简单节点项目中的React外部的normalizr节点包中导入标准化模式功能

  28. 28

    如何获得导入谷歌地图?

  29. 29

    在Django项目中导入应用

热门标签

归档