javascript - react-google-maps 不起作用

Question

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

请你看一下，这里有什么问题吗？随意克隆它。 https://github.com/garstikaitis/weather-app/blob/master/src/components/google_map.js

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

Answer 1

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

另一方面，一个常见的问题是，如果您根本看不到任何 map ，可能是由于将 map 的 height 设置为 "100%"。您会要求 100% 的父容器高度，这很容易是一个零高度的折叠 div，因此您实际上是在要求 100% 的空。

这是一个使用react-google-maps 的@next 版本的示例(我写这篇文章时目前是 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')
);

如果您删除了外部 div 的固定高度 600px 或将其替换为 100% div 会崩溃，你根本看不到 map 。希望这会有所帮助。