React-google-maps不起作用

Question

我正在构建这个天气应用程序。一切似乎都可以工作，但我不能让谷歌地图工作。我看到需要API密钥，我导入了它。然后按照react-google-maps的文档在我的项目中安装它，但它仍然不起作用，但是，我的控制台不再有错误了。

你能看一下吗，这是怎么回事?请随意克隆它。https://github.com/garstikaitis/weather-app/blob/master/src/components/google_map.js

http://arsti.net/weather-app/

Answer 1

对于问题中引用的特定应用程序，当我在本地运行应用程序时，我能够看到地图。然而，它非常非常狭窄。这似乎不是一个react-google-maps问题，而是一个HTML表格布局问题，其中地图的宽度需要调整。

另一个注意事项，一个常见的问题是，如果您根本看不到任何映射，可能是由于将映射的height设置为"100%"。你会要求父容器高度的100%，这很容易是一个高度为零的div，所以你实际上是在要求100%的东西。

下面是一个使用@next版本的React -google-maps(在我写这篇文章的时候是7.0.0)和React 15.6.1的例子:

import React from 'react';
import ReactDOM from 'react-dom';
import { withGoogleMap, GoogleMap } from "react-google-maps";
import withScriptjs from "react-google-maps/lib/async/withScriptjs";
const GettingStartedGoogleMap = withScriptjs(withGoogleMap(props => (
  <GoogleMap
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
  />
)));
ReactDOM.render(
  <div style={{ height: '600px' }}>
    <GettingStartedGoogleMap
      googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.28"
      loadingElement={<div></div>}
      containerElement={ <div style={{ height: `100%` }} /> }
      mapElement={<div style={{ height: `100%` }} />}
    />
  </div>,
  document.getElementById('root')
);

如果你移除了600px的外部div的固定高度或将其替换为100%, div将崩溃，你根本看不到地图。