用反应来实现谷歌地图 [英] Implementing google maps with react

问题描述

在这里反应新手，请耐心等待：）希望这会很容易解决

目前，我只是试图让地图出现在屏幕上，但是当我运行代码时，页面是完全空白的，甚至我的其他div也不会出现。这是我的代码，放在一个要点： https://gist.github.com/JoeyBodnar/f76c5d434d57c6cc6108513ad79d4cb7

有几点需要注意：1）从项目目录中，我已经运行npm install --save react-google-maps 2）使代码地图显示取自以下网址： https://github.com/tomchentw/react-google-maps

那么我究竟做错了什么？我在错误的地方声明了const GettingStartedGoogleMap吗？或者我在div中做错了什么？

还要注意，如果我从该文件中删除所有与Google Maps相关的代码，则一切正常。

任何帮助表示感谢，谢谢

编辑，这里是我的代码，即使硬编码高度仍然显示空白屏幕：

  return（
< GettingStartedGoogleMap 
 containerElement = {
< div style = {{height： `400px`}} /> 
} 
 mapElement = {
< div style = {{height：`400px`}} /> 
} 
 onMapLoad = {_。noop} 
 onMapClick = {_。noop} 
 markers = {markers} 
 onMarkerRightClick = {_。noop} 
 /> 
） ; 
  

解决方案

这是我之前改进的版本回答

我刚刚测试了您的代码，其中包含大量错误，未定义和未使用的变量！
因此，您可以使用下面的代码，这很简单（这会让您通过当前的问题并显示地图！）

首先，安装必要的库：

  npm install --save google-map-react 
 npm install --save prop-types 
  

然后，您可以复制以下全部内容：

 从'react'导入React，{Component}; 
从'google-map-react'导入GoogleMapReact; 
 
 const AnyReactComponent =（{text}）=> < DIV> {文本}< / DIV取代; 
 
 class MyClass扩展组件{
构造函数（道具）{
 super（道具）; 
 
 
 $ render（）{
 return（
< GoogleMapReact 
 defaultCenter = {this.props.center} 
 defaultZoom = {this.props.zoom} 
 style = {{height：'300px'}} 
> 
< AnyReactComponent 
 lat = {59.955413} 
 lng = {30.337844} 
 text = {'Google Map'} 
 /> 
< / GoogleMapReact> 
）; 
} 
} 
 MyClass.defaultProps = {
 center：{lat：59.95，lng：30.33}，
 zoom：11 
}; 
 
导出默认MyClass; 
  

React newbie here, please bear with me : ) Hopefully this will be very simple to solve

For the moment, I am simply trying to get the map to appear on screen, but when I run the code, the page is completely blank, and even my other divs do not appear. Here is my code, put in a gist: https://gist.github.com/JoeyBodnar/f76c5d434d57c6cc6108513ad79d4cb7

A few things to note: 1) from project directory, i already ran npm install --save react-google-maps 2) the code to make the map appear is taken from here: https://github.com/tomchentw/react-google-maps

so what exactly am I doing wrong? is my declaration of "const GettingStartedGoogleMap" in the wrong place? or am I doing something wrong in the div?

also note, if I remove all google maps related code from that file, everything works as normal.

any help is appreciated, thanks

Edit, here is my code, still showing blank screen even hard coding height:

 return (
     <GettingStartedGoogleMap
 containerElement={
    <div style={{ height: `400px` }} />
 }
 mapElement={
 <div style={{ height: `400px` }} />
 }
 onMapLoad={_.noop}
 onMapClick={_.noop}
 markers={markers}
 onMarkerRightClick={_.noop}
/>
  );

解决方案

This is an improved version of my previous answer

I've just tested your code, which contains lots of errors, undefined and unused variables! Therefore, you can use the following code instead, which is quite simple (this will let you through the current problem and show the map!)

First, install necessary libraries:

npm install --save google-map-react
npm install --save prop-types

Then, you may copy the whole thing below:

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class MyClass extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text={'Google Map'}
        />
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

export default MyClass;

这篇关于用反应来实现谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！