用react实现谷歌地图

IT技术 google-maps reactjs
2021-03-31 21:44:16

在这里react新手，请耐心等待:) 希望这将很容易解决

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

需要注意的几件事：1）从项目目录中，我已经运行 npm install --save react-google-maps 2）使地图出现的代码取自此处：https : //github.com/tomchentw/react -谷歌地图

那么我到底做错了什么？我的“const GettingStartedGoogleMap”声明在错误的地方吗？还是我在 div 中做错了什么？

另请注意，如果我从该文件中删除所有与谷歌地图相关的代码，一切正常。

任何帮助表示赞赏，谢谢

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

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

这是我之前回答的改进版

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

首先，安装必要的库：

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

然后，您可以复制以下整个内容：

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;
@HelpingHand 您可以尝试：（仅更改 1 行）const AnyReactComponent = ({ text }) => <div><img src="YOUR-IMG-SRC" className="YOUR-IMG-CLASS" /></div>;您还可以在 react 中添加样式，例如：style={{width: '100px', height: '100px',}}如果这对您有用，请考虑给我一个投票，谢谢
2021-05-26 21:44:16
嘿@thinhvo0108 这是链接.. stackoverflow.com/questions/43937887/...
2021-05-27 21:44:16
您还可以使用我之前回答中的解决方案来动态设置地图高度。我还建议你阅读一些关于 React 组件生命周期的文档：facebook.github.io/react/docs/...
2021-06-15 21:44:16
@thinhvo0108 解决了添加图像的问题！但是你能给我一个例子如何动态添加标记吗？或者我会问一个问题并将链接发送给您？非常感谢！
2021-06-18 21:44:16
嘿，您能否提供一个示例代码，用于动态添加标记和图像。如果可以，我将非常感谢您！
2021-06-19 21:44:16

<div style={{ height: 400px }} />以像素为单位设置高度。

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

npm module，如 google-map-react

在调试时，所有 div 都处于绝对位置

  width: 100%;
  height: 85vh;
  position: relative;

将解决问题

事实是：GoogleMap 要求在渲染之前正确设置元素的长度！因此，您可以：

  • 为您的地图元素设置静态高度：（第 62 行）

    mapElement={
  <div style={{ height: `300px` }} />
}

    或者

  • 使用脚本在页面加载后动态设置它：

    componentDidMount() {
    console.log("component is mounted");
    this.setState({
      pageHeight = document.documentElement.offsetHeight + 'px'
    });
}
...
mapElement={
  <div style={{ height: this.state.pageHeight }} />
}

抱歉我没有足够的时间来测试您的代码，我可以根据自己的经验看到问题！所以如果地图还没有显示出来，也请随意设置“containerElement”元素的高度（以像素为单位）！

编辑版本如下：

请阅读我的新答案

我已经尝试过，但页面仍然呈现空白屏幕，请参阅我的编辑。
2021-05-28 21:44:16
抱歉，我刚刚添加了另一个编辑：“npm install --save prop-types” 看来我在该示例中使用的 GoogleMap 库需要该库，所以也可以随意安装它！
2021-06-05 21:44:16
我刚刚发布了新的编辑，你介意再试一次吗？此外，如果可能的话，请告诉我一些错误，以防代码还不能工作！（也许你仍然需要安装一些缺少的反应库左右）
2021-06-15 21:44:16
其它你可能感兴趣的问题
上一篇使用地图时无法读取未定义的属性“handleClick” 下一篇Flux：等待特定事件